为什么javascript会向我的事件处理程序发送一个元素，当该元素没有事件时？

Question

这个html：

<span id="mySpan"><img src="images/picture.png" alt="Some nice alt text" />
 Link text</span>

此javascript采用包含图像和文本的范围，然后使其可点击：

spanVar = document.getElementById("mySpan");
spanVar.addEventListener("click", myEvent, false);

function myEvent(e){
 var obj = e.target;
}

如果我点击“链接文本”，那么myEvent（）中的obj就是span。如果我点击图像，那么obj就是图像元素！图像本身没有事件。那么为什么不总是传递给事件处理程序的跨度？

顺便说一下，为了简单起见，它只能在Firefox中使用。

此外，如果您可以更加连贯地制作问题，请随时编辑我的问题标题。

Answer 1

您需要阅读event bubbling。

Answer 2

你应该在Quirksmode上看看Peter-Paul Koch的this article，它正在详细回答你的问题

Answer 3

事件被有效地继承。

当一个事件处理程序被添加到一个元素时，所有子节点也会受到该事件处理程序的影响，因为它们在元素内部。所以你必须仔细处理事件。

在您的情况下，您真的想要检查myEvent中点击的内容：

spanVar = document.getElementById("mySpan");
spanVar.addEventListener("click", myEvent, false);

function myEvent(e){
    if (e.target === spanVar) // This will make the img non clickable
        var obj = e.target;
}

Try it out with this jsFiddle

如果要检索最初附加了点击处理程序的元素，只需使用this

spanVar = document.getElementById("mySpan");
spanVar.addEventListener("click", myEvent, false);

function myEvent(e){
    var obj = this;  // This is the object that had the click handler attached
}

Try it out with this jsFiddle

问题确实不是事件冒泡。这是父元素的所有子元素有效地接收其父元素的事件处理程序。如果孩子和父母有不同的处理程序，事件冒泡会发挥作用，但你只想解雇孩子的处理程序。

另一种解决方案是更改HTML：

<div>
    <img src="images/picture.png" alt="Some nice alt text" />
    <span id="mySpan">Link text</span>
</div>