Is it better / faster inside an event listener to use this or event.target

I've been writing code like this (example is jQuery):

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

And I was told to replace e.target with this because it's "better". Is there really any advantage to one or the other?

I use target because it's a more general solution as it works for delegated events. I'm having trouble benchmarking because my tests get cluttered with the binding (Although, obviously, in this case the difference would be too small to matter anyway)

Is it better / faster inside an event listener to use this or event.target

I've been writing code like this (example is jQuery):

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

And I was told to replace e.target with this because it's "better". Is there really any advantage to one or the other?

I use target because it's a more general solution as it works for delegated events. I'm having trouble benchmarking because my tests get cluttered with the binding (Although, obviously, in this case the difference would be too small to matter anyway)

• javascript
• jquery
• optimization

• Using delegate, this returns the element matching the selector. target returns the element the event bubbled from. – ColBeseder Commented Jul 3, 2012 at 9:18
• 1 this is faster in this case : jsperf./this-and-event-target – Alexandre Khoury Commented Jul 3, 2012 at 9:19
• this would be slightly faster as it doesn't have to resolve property of object. But that is so marginal that it's not even worth discussing. If you're looking at this for performance reasons, have a look at this.id over j.attr('id') first. (Short: it really doesn't matter!) – rodneyrehm Commented Jul 3, 2012 at 9:24
• 2 Your jsperf is measuring the performance of registering an event handler rather than the performance of the event handler itself. – rodneyrehm Commented Jul 3, 2012 at 9:30
• @Mageek Your jsperf returns opposite results if you swap the order of the tests. Does anybody have a benchmark example that actually shows which is (slightly) faster? – ColBeseder Commented Jul 3, 2012 at 11:24

2 Answers 2

The one isn't better than the other, but they do different things: this refers to the element the event is attached to, while event.target is the element that invoked the event.

For example

div id=foo   
   div id=bar

when click is attached to foo, and bar is clicked, the event will bubble up to foo. In the event this will refer to foo and event.target to bar

In the end it depends on which element you need to handle.

There's a small example on api.jquery./event.target that illustrates event.target. Here's a small sample that uses that example, but which also displays this: http://jsbin./adifan/edit#javascript,html,live

Well, the jQuery documentation is clear about it :-)

The target property can be the element that registered for the event or a descendant of it. It is often useful to pare event.target to this in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.

(Source: http://api.jquery./event.target/)

This link explains the term "event bubbling": http://www.quirksmode/js/events_order.html