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

事件是指当前被触发的事件。现在，在浏览器中，事件从触发事件的元素冒泡到其父元素，直到它到达文档根目录。更多信息：What is event bubbling and capturing?

在您的示例中，事件指向点击事件， event.target 是 div 且此指的是 div 本身。如果您将一个子元素添加到 div 并单击该元素，那么 event.target 将指向子元素，此仍然会请参阅 div 。

Answer 4

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

我应该在javascript中使用“this”或“event.target”吗？

4 个答案: