jQuery equivalent of JavaScript’s addEventListener method

jQuery equivalent of JavaScript’s addEventListener method

I’m trying to find the jQuery equivalent of this JavaScript method call:
document.addEventListener(‘click’, select_element, true);

I’ve gotten as far as:

but that doesn’t achieve the same result, as the last parameter of the JavaScript method – a boolean that indicates whether the event handler should be executed in the capturing or bubbling phase (per my understanding from http://www.quirksmode.org/js/events_advanced.html) – is left out.
How do I specify that parameter, or otherwise achieve the same functionality, using jQuery?


Solution 1:

Not all browsers support event capturing (for example, Internet Explorer versions less than 9 don’t) but all do support event bubbling, which is why it is the phase used to bind handlers to events in all cross-browser abstractions, jQuery’s included.

The nearest to what you are looking for in jQuery is using bind() (superseded by on() in jQuery 1.7+) or the event-specific jQuery methods (in this case, click(), which calls bind() internally anyway). All use the bubbling phase of a raised event.

Related:  Skip nested forms validation with AngularJS

Solution 2:

As of jQuery 1.7, .on() is now the preferred method of binding events, rather than .bind():

From http://api.jquery.com/bind/:

As of jQuery 1.7, the .on() method is the preferred method for
attaching event handlers to a document. For earlier versions, the
.bind() method is used for attaching an event handler directly to
elements. Handlers are attached to the currently selected elements in
the jQuery object, so those elements must exist at the point the call
to .bind() occurs. For more flexible event binding, see the discussion
of event delegation in .on() or .delegate().

The documentation page is located at

Solution 3:

The closest thing would be the bind function:


$('#foo').bind('click', function() {
  alert('User clicked on "foo."');

Solution 4:

One thing to note is that jQuery event methods do not fire/trap load on embed tags that contain SVG DOM which loads as a separate document in the embed tag. The only way I found to trap a load event on these were to use raw JavaScript.

Related:  Opposite of ng-cloak for loading message

This will not work (I’ve tried on/bind/load methods):

$img.on('load', function () {

However, this works:

$img[0].addEventListener('load', function () {
}, false);

Solution 5:

You should now use the .on() function to bind events.

Solution 6:

Here is an excellent treatment on the Mozilla Development Network (MDN) of this issue for standard JavaScript (if you do not wish to rely on jQuery or understand it better in general):


Here is a discussion of event flow from a link in the above treatment:


Some key points are:

  • It allows adding more than a single handler for an event
  • It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling)
  • It works on any DOM element, not just HTML elements
  • The value of “this” passed to the event is not the global object (window), but the element from which the element is fired. This is very convenient.
  • Code for legacy IE browsers is simple and included under the heading “Legacy Internet Explorer and attachEvent”
  • You can include parameters if you enclose the handler in an anonymous function
Related:  Handle open/collapse events of Accordion in Angular