Why does the trigger event not call events defined with addEventListener

Question

I created a sample case:

http://jsfiddle.net/y42pu5b6/

$(function(){
    function ping (){ 
        alert( "function fired" ); 
        console.log("fired"); 
    }
    console.log($("input#one")[0]);
    $("input#one")[0].addEventListener("change", ping);
    $("input#one").trigger("change");

    $("input#two").on("change", ping);
    $("input#two").trigger("change");

});

It seems that with jQuery, you cant "trigger" and event applied with the addEventListener call. Is there a reason for this? I was under the notion that since trigger is a jquery method, it is only scanning the jQuery object for the handlers, and not what is actually applied to the object.

I feel that trigger should fire for all applicable events, whether they were added via on or addEventListener. Maybe it is taking a snapshot of code at timeframe X, and is storing it in the jquery object. Im not sure.

Maybe someone else has more insight into this than myself?

Answer 1

Since different Browsers handling different events in different ways, jQuery mitigates the problem by introducing its own Event abstraction layer (that is also providing event namespacing among other benefits).

Hence, when you're calling trigger, jQuery is only triggering its own-bound events (using on, bind, click etc), but it doesn't try to fire natively-bound events.

See http://learn.jquery.com/events/triggering-event-handlers/