Question

样本A：

<table><tr>
  <td onclick='return tdclick()'><img ... /></td>
</tr></table>

假设用户点击上面的IMG，以下情况属实：

tdclick将触发两次，一次用于IMG，一次用于TD
将首先触发IMG，然后触发TD
当且仅当tdclick在广告中触发this == e.target

样本B：

<table><tr>
  <td onclick='return tdclick()'><img onclick='return imgclick()' ... /></td>
</tr></table>

假设用户点击上面的IMG，以下情况属实：

imgclick触发IMG和this == e.target
然后一切都发生在上面的A

℃。最后，如果事件处理程序是通过

td.addEventListener( 'click', tdclick, false );
img.addEventListener( 'click', imgclick, false );

同样的陈述是否会像以前一样真实，或者陈述A2会被颠倒过来吗？

Answer 1

样品A：

1）错误

2）错误

3）错误

该事件只会触发一次，因为只有一个“click”事件附加到一个DOM元素。即使事件源自子元素（例如img），它实际上也不会触发，直到事件冒泡击中父元素。在这种情况下，“this”将是TD元素（因为它是事件触发的源，而它称为函数）。但是，如果你查看事件传递的第一个参数，并检查它的数据，你会看到e.target通常是IMG元素。

var tdClick = function(e){
    console.log(e.target); // typically the IMG element
}

我说“通常”，因为某些浏览器在事件详细信息对象中调用原始元素不同。有些浏览器是'目标'，有些是'originalTarget'，可能还有更多。

样本B：

1）是的，imgClick触发图像。不确定你的陈述的第二部分是什么意思。处理DOM事件时，'this'将成为触发事件的DOM元素。因此，在这种情况下，'this'是IMG元素（也恰好是e.target）

2）假，如前所述：）

样本C：

addEventListener与在元素的“onclick”属性中手动添加函数调用完全相同。所以，行为是一样的......但实际上我并不熟悉addEventListener的第三个参数（每个Mozilla Dev Center，它被命名为useCapture，并且与冒泡有关，我只是不熟悉用它）

我建议将FireFox与Firebug扩展程序或Chrome一起使用，然后只测试其中一些。在事件函数内部，只需执行console.log（this）或console.log（e）等，它们的开发控制台将允许您检查对象的所有细节。这非常有用。只要记得在完成后取出你的console.log（）语句，因为它们会在IE中嘶哑。

在javascript事件触发器中，_this_与e.target相同？射击的顺序？

1 个答案: