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

【问题标题】：Should I be using "this" or "event.target" in javascript?我应该在 javascript 中使用“this”还是“event.target”？
【发布时间】：2013-06-12 08:03:48
【问题描述】：

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

对于我上面的示例，它们都可以正常工作.....

【问题讨论】：

标签： javascript events this target

【解决方案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 会更直观。

【讨论】：

this 指的是函数的所有者。有时这是另一段代码，但它也可能是一个对象。但是如果你正在编写一个事件处理函数，你最好避免这样做？因为在 IE 中它指的是我猜想的事件处理框架对象...... :)

【解决方案2】：

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

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

由于你的 div 上有一个点击事件，当你点击它时，它被视为一个事件，这就是 this 和 e.target 都起作用的原因。

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

在您的示例中，event 指向点击事件，event.target 是 div 和 this 指的是 div 本身。如果您将子元素添加到 div 并单击该元素，则 event.target 将指向子元素，而 this 仍将参考div。

【讨论】：