jQuery equivalent of JavaScript's addEventListener method

Question

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:

$(document).click(select_element);

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?

Answer 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.

Answer 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 http://api.jquery.com/on/

Answer 3

The closest thing would be the bind function:

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

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

Answer 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.

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

$img.on('load', function () {
    console.log('FOO!');
});

However, this works:

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

Answer 5

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

Answer 6

$( "button" ).on( "click", function(event) {

    alert( $( this ).html() );
    console.log( event.target );

} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button>test 1</button>
<button>test 2</button>

Answer 7

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):

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

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

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

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