Twitter Bootstrap. Warum funktionieren modale Ereignisse in JQuery, aber nicht in reinem JS?

Question

Das modale Dialogfeld "Bootstrap" von Twitter enthält eine Reihe von Ereignissen, die bei Rückrufen verwendet werden können. Hier

ist ein Beispiel in jQuery:

$(modalID).on('hidden.bs.modal', function (e) { 

     console.log("hidden.bs.modal"); 
    }); 

Allerdings, wenn ich diese Methode transkribieren das Ereignis 'hidden.bs.modal' JS funktioniert nicht. Mit 'Klick' Arbeit ist:

document.querySelector(modalID).addEventListener('hidden.bs.modal', function(e) { 

     console.log("hidden.bs.modal"); 
    }, false); 

Sind diese Bootstrap Veranstaltungen mit jQuery nur nutzbar? Warum?

Danke,
Doug

Answer 1

Die Überlegung dahinter ist, weil Twitter Bootstrap that.$element.trigger('hidden.bs.modal') (line 997) verwendet es Ereignisse auszulösen. Mit anderen Worten verwendet es .trigger.

Jetzt hält jQuery Spur jeden Event-Handler des Elements (all .on oder .bind oder .click usw.) mit ._data. Dies liegt daran, dass there isn't any other way to get the event handlers an ein Element gebunden sind (unter Verwendung von .addEventListener). Also die Trigger-Methode tatsächlich bekommen nur die Set-Ereignis-Listener (s)/Handler von ._data(element, 'events') & ._data(element, 'handle') als Array und führt jede von ihnen.

handle = (jQuery._data(cur, "events") || {})[ event.type ] && jQuery._data(cur, "handle"); 
if (handle) { 
    handle.apply(cur, data); 
} 

(line 4548)

Dies bedeutet, dass egal, was Kontext ist, wenn ein Ereignis über .addEventListener gebunden ist es nicht .trigger mit ausgeführt wird. Hier ist ein Beispiel. Beim Laden wird nur jquery geloggt (ausgelöst durch .trigger). Wenn Sie jedoch auf das Element a klicken, werden beide ausgeführt.

$('a')[0].addEventListener('click', function(){console.log('addlistener');}, false); 

$('a').on('click', function(){ 
    console.log('jquery'); 
}); 

$('a').trigger('click'); 

DEMO

Alternativ Sie can trigger an event auf ein Element in Javascript mit fireEvent (ie) & dispatchEvent (nicht-ie). Ich verstehe oder kenne die Argumentation von jQuerys .trigger nicht, dies nicht tun, aber sie können oder dürfen nicht haben. Nach a little more research Ich habe festgestellt, dass sie dies nicht tun, weil einige ältere Browser nur 1 Ereignishandler pro Ereignis unterstützt.

Im Allgemeinen haben wir nicht versucht, Funktionalität zu implementieren, die nur auf einigen Browsern (und einigen Ereignissen) funktioniert, aber nicht alle, da jemand sofort einen Fehler eingibt, der nicht richtig funktioniert.

Obwohl ich es nicht empfehlen, können Sie dies mit einer minimalen Menge von Änderungen an Bootstraps-Code umgehen. Sie müssen nur sicherstellen, dass die Funktion unten angebracht ist erste (oder Sie haben Listener feuern zweimal).

$(modalID).on('hidden.bs.modal', function (e, triggered) { 
    var event; // The custom event that will be created 

    if(!triggered){ 
     return false; 
    } 

    e.preventDefault(); 
    e.stopImmediatePropagation(); 

    if (document.createEvent) { 
     event = document.createEvent("HTMLEvents"); 
     event.initEvent("hidden.bs.modal", true, true); 
    } else { 
     event = document.createEventObject(); 
     event.eventType = "hidden.bs.modal"; 
    } 

    event.eventName = "hidden.bs.modal"; 

    if (document.createEvent) { 
     this.dispatchEvent(event); 
    } else { 
     this.fireEvent("on" + event.eventType, event); 
    } 
}); 

schließlich die Linie Twitter Bootstrap von oben ändern zu:

that.$element.trigger('hidden.bs.modal', true) 

Dies ist so, wissen Sie, sein Wesen ausgelöst und nicht das Ereignis, das Sie sich nach dem Brennen sind. Bitte beachte, dass ich diesen Code nicht mit dem Modal ausprobiert habe. Obwohl es auf der Demo click unten gut funktioniert, funktioniert es möglicherweise nicht wie erwartet mit dem Modal.

DEMO