事件捕获未按预期运行

Question

我正在尝试在 JavaScript 中捕获事件，但它没有按预期工作。

例如，这里有一些 html :

<div id="test">
    <a href="someimage.jpg"><img src="someimage.jpg" /></a>
</div>

和JavaScript：

document.getElementById("test").addEventListener("click", function(event) {
    event.preventDefault();
    console.log(event.target.nodeName);
}, true);

我的理解是，由于捕获设置为 true，因此单击图像应该将 DIV 记录到控制台。相反，它记录 IMG...

如果有人能解释原因，或者指出解释它的文档，那就太好了。

Answer 1

My understanding is that since capturing is set to true, clicking the image should log DIV to the console. Instead, it logs IMG...

这是完全错误的。 event.target 将始终 return 触发事件的元素，与事件处理阶段无关。见 spec.

Answer 2

您似乎混淆了 元素处理程序 与 元素目标 。

当您使用 event.target 时，您指的是单击时光标正前方的元素。

相反，要引用事件的元素处理程序，您应该使用关键字 this。

事件捕获未按预期运行

Event capturing not functioning as expected

javascript

dom-events