我应该用“this”吗?或“;event.target"在javascript

Should I be using "this" or "event.target" in javascript?

本文关键字：target event javascript quot this 我应该      更新时间：2023-09-26

我在下面创建了一个简单的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;">

它们都可以很好地用于我上面的例子.....

很可能它们完全相同。这取决于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更直观。

当"e"是传递参数的事件时，通常使用e.target

当您将this作为参数传递时，这是对包含javascript方法的DOM节点的引用。这里，"this"引用的是div

当你在div上有一个点击事件时，当你点击它时，它被认为是一个事件，这就是为什么this和e.t artarget都能工作的原因

此外，"this"将始终指向div，而"e.t artarget "将指向您在div中单击的元素。

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

事件表示当前正在触发的事件。现在，在浏览器中，事件从触发事件的元素冒泡到其父元素，直到到达文档根节点。更多关于:什么是事件冒泡和捕获?

在您的示例中，事件指向单击事件和事件。target是div，而this是指div本身。如果您将子元素添加到div并单击该元素，则事件。target指向子元素，而这个仍然指向div。
相关文章：