jQuery .on(); vs JavaScript .addEventListener();

by

When you use .on() at the document level, you’re waiting for the event to bubble all the way up to that point. The event handler for any intermediate container will already have been called.

Event “bubbling” is the process by which the browser looks for event handlers registered with parents of the element that was the actual original recipient of the event. It works upwards in the DOM tree. The document level is the last level checked. Thus, your handler registered with .on() won’t run until that level is reached. In the meantime, the other event handler at the “outer” level is reached first and it is executed by the browser.

Thus, that return false; in the handler registered with .on() is pretty much useless, as would be a call to event.stopPropagation(). Beyond that, mixing native event handler registration with the work that a library like jQuery will do is probably a really bad idea unless you seriously know what you’re doing.

There was a question asked almost exactly like this one just a little while ago today.

More Related Contents:

  1. event.preventDefault() vs. return false
  2. Detecting Browser Autofill
  3. How to debug JavaScript / jQuery event bindings with Firebug or similar tools?
  4. When should I use jQuery’s document.ready function?
  5. jQuery checkbox checked state changed event
  6. jQuery checkbox change and click event
  7. Alternative to jQuery’s .toggle() method that supports eventData?
  8. Need to cancel click/mouseup events when double-click event detected
  9. How do you handle oncut, oncopy, and onpaste in jQuery?
  10. jQuery equivalent of JavaScript’s addEventListener method
  11. jQuery: $().click(fn) vs. $().bind(‘click’,fn);
  12. Why is ‘event’ available globally in Chrome but not Firefox?
  13. Implementing jQuery’s “live” binder with native Javascript
  14. How to unbind a specific event handler
  15. jQuery: more than one handler for same event
  16. submit event does not fire if submit initiated programmatically
  17. jQuery .on() method doesn’t see new elements
  18. Concat two arrays But concat is not working
  19. How to addClass active using on scroll but not using a href id?
  20. Can jQuery get all CSS styles associated with an element?
  21. How to get the text node of an element?
  22. How can I detect pressing Enter on the keyboard using jQuery?
  23. What is the difference between the mouseover and mouseenter events?
  24. $(document).ready(function() VS $(function(){ [duplicate]
  25. add commas to a number in jQuery
  26. How can I get the title of a webpage given the url (an external url) using JQuery/JS
  27. Convert html table to array in javascript
  28. Why jQuery cannot trigger native click on an anchor tag?
  29. Transform Javascript Array into delimited String
  30. Why does the jQuery JSON parser need double escaping for backslashes?

Leave a Comment