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

Question

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

Tom*_*uts 3 html javascript events addeventlistener

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

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

Run Code Online (Sandbox Code Playgroud)

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

如果我通过将 eventListener 直接添加到 div id 以正常方式执行此操作，则它会起作用。

Answer 1

Rob*_*obG 5

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

event.currentTarget，它是实际调用侦听器的元素（即已附加侦听器的元素），以及
event.target，这是事件实际发生的元素

它们可以是相同的元素，父元素和子元素，或者祖先和后代（这里就是这种情况）。

因此，单击 LI 使其成为target，并且由于主体的单击处理程序调用侦听器，因此它是currentTarget，而 DIV 两者都不是。如果您将侦听器放在 DIV 上，它将成为currentTarget。

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

一些链接：

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

归档时间：	9 年，9 月前
查看次数：	3947 次
最近记录：	9 年，9 月前