我应该在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 。

Answer 2

当“e”是像参数中传递的点击一样的事件时，通常使用e.target。

当您将此作为参数传递时，这是对具有javascript方法的DOM节点的引用。 所以在这里，“this”引用了div。

当你在你的div上有一个点击事件时，当你点击它时，它被认为是一个事件，这就是为什么这个和e.target都有效。

此外，“this”将始终引用您的div，而“e.target”将引用您在div中单击的元素。

Answer 3

该事件指的是当前被触发的事件。 现在，在浏览器中，事件从触发事件的元素冒泡到其父元素，直到它到达文档根目录。 更多内容： 什么是事件冒泡和捕获？

在您的示例中， 事件指向click事件， event.target是div ， 这指的是div本身。 如果你将一个子元素添加到div并单击该元素，那么event.target将指向子元素， 这仍将引用div 。

Answer 4

我认为没有必要this作为参数传递给onclick事件，你可以直接使用this函数。