Question

我正在尝试创建一个事件监听器来处理我的所有“点击”，方法是将其放在正文并进行一些事件委托。我想要做的一个简单的例子是：

<html>
 <body> 
  <div id = "div1">
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
   <ul>
  </div>
   <script>
    document.body.addEventListener('click', function(e){
     if(e.target.id == "div1"){alert("hi")}
    })
   </script>
 </body>
</html>

我对上面代码的期望是，当我点击“li”元素时，警报会触发，因为它嵌套在父div中。我以为这个事件会传播给父母和火。但是，如果我点击li元素，它似乎根本不起作用。有人可以帮助解释发生了什么吗？谢谢！

如果我是通过将eventListener直接添加到div id而以正常方式执行它，那么它将起作用。

Answer 1

有两个与事件相关的元素：

event.currentTarget，它是实际调用侦听器的元素（即侦听器已连接到的元素），
event.target，这是事件实际发生的元素

这些可以是相同的元素，父母和子女，或祖先和后代（在这里就是这种情况）。

因此点击LI使其成为目标，并且由于正文的点击处理程序调用了侦听器，因此它是 currentTarget ，而DIV则不是。如果您将侦听器放在DIV上，它将成为 currentTarget 。

最初，除元素之外的节点可能是事件目标，但在最近的实现中，只有元素是目标。

一些链接：

W3C DOM 4 Interface eventTarget
W3C DOM 4 Event

请注意， target 和 eventTarget 被指定为（主机）对象，它们不一定是元素，尽管它们大多是在当前浏览器中实现的。< / p>

Answer 2

你应该使用e.target.parentNode.parentNode.id =='div1' 参见演示：

document.body.addEventListener('click', function(e) {
  if (e.target.parentNode.parentNode.id == "div1") {
    alert("hi")
  }
})

<div id="div1">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <ul>

Answer 3

如果单击li，则是来自parentNode div#div1

的当前两步子节点

div#div1 > ul > li[current target] //back parentNode to 2 times

<script>
    document.body.addEventListener('click', function(e){
     if(e.target.parentNode.parentNode.id == "div1"){alert("hi")}
    })
</script>

Answer 4

如果您希望单击身体中的所有LI，则可以检查nodeName。

这是小提琴： https://jsfiddle.net/swaprks/f3crax1q/

使用Javascript：

document.body.addEventListener('click', function(e){
     if(e.target.nodeName == "LI"){alert("hi")}
})

Answer 5

这里有jquery供参考：

  $("li").on('click', function(){
      var y = this.parentElement.parentElement.id;
      if (y === 'div1')
        alert(y);
  })

此事件附加到Dom中的所有<li>元素。您可以使用parentElement跟踪树的根目录，以访问包含<li>元素<div>属性的id。

可替换地：

$("div").on('click', function(){
  var y = this.id;
  if (y === 'div1')
    alert(y);
})

但是，这会在任何<div>元素中的每次点击时触发。

单击Javascript事件侦听器未按预期工作

5 个答案: