I've made this test code for the question: https://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?
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With