4

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

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

4

4 回答 4

7

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

于 2013-06-12T08:23:12.983 回答
3

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

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

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

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

于 2013-06-12T08:16:35.603 回答
2

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

于 2013-06-12T08:13:18.850 回答
2

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

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

于 2013-06-12T08:27:49.903 回答