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

- baDrosa82

---

什么问题？你尝试过 event.target 吗？ - Ruan Mendes

如果你只想获取p标签，我建议不要将事件监听器添加到父元素上，而是直接添加到p标签上。否则，你可能会收到像<strong>或<a>这样的子元素作为目标。 - dome2k

event.target 将会给你被点击的元素，而 event.currentTarget 将会给你最初绑定事件的元素（即 div）。 - Ted Whitehead

@JuanMendes 不，我没有哈哈，非常感谢。 - baDrosa82

这回答您的问题吗？[如何获取（整个文档中）被单击的元素？]（https://dev59.com/3mox5IYBdhLWcg3wtmnh） - matvs

Answer 1

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
})

- itamar

---

如果currentTarget为空怎么办？我有一个类似的情况，即按钮上附加了事件和嵌套的span。在单击span后，我得到target=span和currentTarget=null。 - Bartosz Rosa

Answer 2

正如我在评论中所写的那样，event.target 应该可以。但是如果你真的只想要 p 标签，就需要小心了。如果在包装 div 中使用 a 标签或其他子元素，可能也会收到其他标签。

我建议直接将事件监听器添加到 p 标签中。

- dome2k

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);
  });
}

- dw_

---

只要它们都在 div 下面，你就可以在 div 中捕获事件，然后使用 event.target 获取被点击的 p 标签。 - itamar

是的，如果没有其他p元素的后代。 - dw_

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`
   })
}

- Matt Croak