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

User · Answer

The closest thing would be the bind function   http   api jquery com bind       foo   bind  click   function       alert  User clicked on  foo

User · Answer

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

User · Answer

You should now use the  on   function to bind events

User · Answer

x000D   x000D      button    on   click   function event    x000D   x000D      alert     this   html      x000D      console log  event target    x000D   x000D       x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 4 1 jquery min js  gt  lt  script gt  x000D   x000D   lt button gt test 1 lt  button gt  x000D   lt button gt test 2 lt  button gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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

[javascript] jQuery equivalent of JavaScript's addEventListener method

Examples related to javascript

Examples related to jquery

Examples related to events

Examples related to event-handling

Examples related to dom-events