JS 通過 event.target 獲取被點擊的元素

Question

我正在嘗試使用 JavaScript 獲取點擊元素的信息。

這是jsFiddle 。

下面是我的代碼。

 let div = document.querySelector('div') div.addEventListener('click', function(event) { // how to get the clicked p tag here? // this? // event.target.currentTarget? })

 <div> <p>text 1</p> <p>text 2</p> </div>

我如何使用this來獲取元素的信息？

答案： event.target謝謝 Juan Mendes

Answer 1

歡迎來到 StackOverflow！

e.target應該為您提供被點擊以生成事件的確切元素。

e.currentTarget將為您提供調用函數時事件所在的元素（從e.target冒泡后）

div.addEventListener('click', (e) => {
console.log(e.target) // the p that was clicked
console.log(e.currentTarget) // this div
})

Answer 2

正如我在評論event.target中所寫的那樣應該沒問題。 但是如果你真的只想要 p-tags，你應該小心。 如果您在包裝 div 中使用 a-tags 或其他子元素，您可能還會收到其他標簽。

我建議直接將事件偵聽器添加到 p-tags。

Answer 3

可能最好將事件偵聽器附加到每個p元素，以防你有其他子元素嵌套在p元素本身中。

const paragraphs = document.querySelectorAll("div > p");

for (let i = 0; i < paragraphs.length; i += 1) {
  paragraphs[i].addEventListener("click", function (event) {
        console.log(event.currentTarget);
  });
}

Answer 4

如果你使用event.target你應該得到你點擊的特定p標簽。

但是，如果您真的想使用this ，最好將 onclick 事件處理程序附加到 p 標簽本身而不是父標簽。

像這樣。

let ps = document.getElementsByTagName('p')

for (var i = 0; i < ps.length; ++i){
    ps[i].addEventListener('click', function(event){
        // how to get the clicked p tag here?
        alert(this.innerText) //or whatever action you want to do with `this`
   })
}