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?

Was it helpful?

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top