*this* 优于 event.target答案

【问题标题】：Advantage of *this* over event.target*this* 优于 event.target
【发布时间】：2012-07-03 16:49:17
【问题描述】：

在事件侦听器中使用this 或event.target 是否更好/更快

我一直在写这样的代码（例如 jQuery）：

jQuery('input').bind('keyup', function (e) {
 var j = jQuery(e.target);
 foo(j.attr('id') , j.val() );
});

有人告诉我用this 替换e.target，因为它“更好”。两者之间真的有任何优势吗？

我使用 target 是因为它是一种更通用的解决方案，因为它适用于委托事件。我在进行基准测试时遇到了麻烦，因为我的测试被绑定弄得杂乱无章（尽管很明显，在这种情况下，差异太小了，无论如何都不重要）

【问题讨论】：

使用委托，this 返回匹配选择器的元素。 target 返回事件冒泡的元素。
this 在这种情况下更快：jsperf.com/this-and-event-target
这会稍微快一些，因为它不必解析property of object。但这太微不足道了，甚至不值得讨论。如果您出于性能原因正在查看此内容，请先查看 this.id 而不是 j.attr('id')。（短：真的没关系！）
您的 jsperf 衡量的是注册事件处理程序的性能，而不是事件处理程序本身的性能。
@Mageek 如果您交换测试的顺序，您的 jsperf 会返回相反的结果。有没有人有一个实际显示哪个（稍微）更快的基准示例？

【解决方案1】：

一个并不比另一个好，但他们做不同的事情：this 指的是事件附加到的元素，而 event.target 是调用事件的元素。

例如

div id=foo   
   div id=bar

当 click 附加到 foo 并单击 bar 时，事件将冒泡到 foo。在事件中 this 将引用 foo 和 event.target 到 bar

最终取决于你需要处理哪个元素。

在 api.jquery.com/event.target 上有一个小例子来说明 event.target。这是一个使用该示例的小示例，但它也显示 this：http://jsbin.com/adifan/edit#javascript,html,live

【讨论】：

在委派事件上，this 仍与event.target 指向相同。例如$('#foo').on('click','#bar',function(e){..});
<p><span>foo</span></p> 点击p 会导致event.originalTarget 指向span 如果您点击单词foo。
@GabyakaG.Petrioli 在您的示例中，您绑定了选择器“#bar”，而不是 foo，因此 this 确实是 bar。如果你绑定到#foo，this 应该是 foo。我使用了来自api.jquery.com/event.target 的示例，并将this 的显示添加到显示中以说明此示例中的两个：jsbin.com/adifan/edit#preview
@GabyakaG.Petrioli：这不是真的。 jQuery 在那里做了很多魔法，它既不会在 this 上也不会在目标上调用你的处理程序，而是在所选元素（第二个参数）上调用你的处理程序，可以作为目标。
@GabyakaG.Petrioli：但这不是真的。 this 始终指向选择器元素（#bar），而 event.target 将指向点击的最里面的元素（可能是 #bar 的子元素）。

【解决方案2】：

嗯，jQuery 文档对此很清楚 :-)

目标属性可以是为事件注册的元素或它的后代。将 event.target 与 this 进行比较通常很有用，以确定是否由于事件冒泡而正在处理事件。当事件冒泡时，此属性在事件委托中非常有用。

【讨论】：