我应该在javascript中使用“ this”还是“ event.target”？

Question

我在下面创建了一个简单的div演示，单击一次将不显示任何一个。

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">

function toggle2(e) {

    var textx = (e.target) ? e.target : e.srcElement;
    textx.style.display = "none";

    console.log(e.target);
} 

我的问题是，如果我更换，有什么区别

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">

与

<div id="three" onclick="toggle2(this);return false;" style="background:#303; color:#FFF;">

两者对于我上面的示例都可以正常工作.....

Answer 1

它们可能完全相同。这取决于HTML。在这种情况下，this将始终是div元素。this指捕获事件的元素。event.target但是，指向事件起源的元素。

如果元素没有子元素，则它们将始终相同。但是，如果您有这样的事情：

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">
    <span>Line 1</span>
    Line 2
</div>

那么它们可能会有所不同。单击Line 1将event.target成为该span元素，因此仅该元素将被隐藏。

除非您特别想指出事件起源的元素，否则使用起来会更直观this。