Why jQuery's triggerHandler() doesn't prevent inline events?
-
26-10-2019 - |
Question
I've made this test code for the question: http://jsfiddle.net/5phqm/1/
As far as I understand, if jQuery's triggerHandler()
prevents default browser behavior, then native JavaScript events will not be triggered and handled (and it's true for addEventListener()
in my code), but inline event, added through tag's attribute onclick=""
will be triggered anyway! Why it happens? Am I misunderstanding something about events triggering in browser?
Solution
It can be confirmed that inline handlers are run because it is explicitly coded:
handle = ontype && cur[ ontype ];
if ( handle && jQuery.acceptData( cur ) && handle.apply( cur, data ) === false ) {
event.preventDefault();
}
where ontype
is in this case "onclick"
. So it is fetching the onclick
property of the element and then executing it. This piece of code is always called, regardless of .trigger
/.triggerHandler
.
Native actions however, like elem.click()
, are only executed inside an if
block:
if ( !onlyHandlers && !event.isDefaultPrevented() ) {
// ...
elem[ type ]();
where onlyHandlers
is true
for triggerHandle
and false
for .trigger
, and therefore triggerHandler
does not execute e.g. elem.click()
(whereas .trigger
does). As such, the native action is prevented.
So inline handlers and native actions are separate things and are also handled separately. Only native actions are prevented by .triggerHandler
.
OTHER TIPS
I think (but it's a guess, i gave a brief look at jQuery source code and this might be totally wrong) that jQuery retrieves the events attached to elements in jQuery.trigger.event by calling something like
$(elem).data("events");
and then decides if to fire/stop them. Inline events can't be collected this way and so they can't be stopped.