Eine kurze Diskussion über das Prinzip der jQuery-Ereignisbindung_jquery

In jq gibt es eine Datenmethode, die relevante Daten an DOM-Elemente bindet. Wenn ein Ereignis mithilfe der jq-Methode an den Dom gebunden wird, wird eine entsprechende Zeitliste generiert
Sie können das folgende Beispiel sehen (bitte sehen Sie es sich in Firefox an, da Objekte in Firefox toSource() unterstützen)

Code kopieren Der Code lautet wie folgt:

Daten werden verwendet, um Daten an Elemente
zu binden Die Datenquelle ist das Cache-Objekt
Wenn das Element an Daten gebunden ist, wird dem Element ein Attribut jQueryxxx hinzugefügt. xxx ist der Zeitstempel der Ausführung von jq
Lassen Sie mich hier erklären, dass es eine UUID gibt, die kumulativ ist
Der Wert von jQueryxxx ist diese UUID
Der Cache-Schlüssel ist diese UUID
value sind die zu speichernden Daten
Daten sind für die Ereignisbindung sehr wichtig.........................

Code kopieren Der Code lautet wie folgt:

Funktion now(){ 
    neues Datum zurückgeben; 
};
var win     = this,
    expando = "jQuery" now(), 
       uuid    = 0,  
      Cache   = {};
win.data = function(elem, name, data){ 
    var id = elem[expando]; 
    if(!id) 
        id = elem[expando] = uuid; 
    if(name&&!cache[id]) 
        Cache[id] = {}; 
    if(data !== undefiniert) 
        Cache[id][Name] = Daten; 
    Rückgabename 
        ? Cache[ID][Name] 
        : Ausweis; 
}
win.removeData = function(elem, name){ 
    var id = elem[expando]; 
    if (Name){ 
        if (cache[id]) { 
            Cache[id][name] löschen; 
            name = ""; 
            für (Name im Cache[id]) 
                brechen; 
            if ( !name ) 
                RemoveData(elem); 
        }  
    }else{   
            Versuchen Sie es mit { 
                delete elem[expando]; 
            } Catch(e){ 
                if (elem.removeAttribute) 
                    elem.removeAttribute( expando ); 
            } 
            Cache[ID] löschen; 
    } 
}

win.each = function( object, callback, args ) { 
    Variablenname, i = 0, Länge = object.length; 
    if ( args ) { 
        if ( length === undefiniert ) { 
            für (Name im Objekt) 
                if ( callback.apply( object[ name ], args ) === false ) 
                    brechen; 
        } sonst 
            für ( ; i < Länge; ) 
                if ( callback.apply( object[ i ], args ) === false ) 
                    brechen; 
    } else { 
        if ( length === undefiniert ) { 
            für (Name im Objekt) 
                if ( callback.call( object[ name ], name, object[ name ] ) === false ) 
                    brechen; 
        } sonst 
            for ( var value = object[0]; 
                ich < Länge && callback.call( value, i, value ) !== false; value = object[ i] ){} 
    } 
    Rückgabeobjekt; 
}

Implementieren Sie dann das Hinzufügen von Ereignissen

In jq ist die Add-Methode in jQuery.event
Einige Funktionen sind in der Add-Methode
implementiert Rufen Sie die Ereignisse des Elements ab und verarbeiten Sie die an diese beiden Daten gebundenen Daten
events speichert eine Liste von Ereignissen
Das Format ist wie folgt
{
click: [{handler:function(){},type:"click",guid:'xx'}.....],
Maus:[...]
}
handle ist die ausgeführte Funktion
(Alle Ausführungsfunktionen sind gleich. Sie durchlaufen die Ereignisliste und führen das entsprechende Ereignis aus)
Dann durchlaufen Sie die Typen, da mehrere Ereignisse gebunden werden können
Die Callback-Funktion gibt auch mehrere Attribute
an Angenommen, die Rückruffunktion ist handler
handler.guid = gevent.guid
handler.type = name
Der Name sollte als spezieller Name betrachtet werden, damit er leicht gelöscht werden kann
Zum Beispiel
$('#xx')
.bind('click',function(){})
.bind('click.d',handler)
Der Name ist d
Beim Löschen können Sie nur das d-Ereignis löschen, ohne das obige Klickereignis
zu löschen
Schließlich ist das Ereignis an das Element gebunden, aber die ausgeführten Funktionen sind alle
function(){
gevent.handle.apply(arguments.callee.elem, arguments);
});

Code kopieren Der Code lautet wie folgt:

win.gevent = {
Anleitung: 1,
Hinzufügen: Funktion (Elem, Typen, Handler){
If (elem.nodeType == 3 || elem.nodeType == 8)
             zurück;
             if ( elem.setInterval && elem != window )
              elem = window;
//Geben Sie der Funktion einen eindeutigen Index, um das spätere Löschen des Ereignisses zu erleichtern
           if ( !handler.guid )
               handler.guid = this.guid;
//Die Daten unter dem Ereignishandle des Elements
abrufen       var events = data(elem, "events") || data(elem, "events", {}),
                handle =data(elem, "handle") || data(elem, "handle", function(){
//gevent.handle ist die Funktion, die ausgeführt wird, nachdem verschiedene Verhaltensweisen ausgelöst wurden
gevent.handle.apply(arguments.callee.elem, arguments);
            });
          handle.elem = elem;
//Ereignisnamen durchlaufen, da er mit der Maus darüber geklickt werden kann
Each(types.split(/s /), function(index, type) {
            var namespaces = type.split(".");
//Ereignisnamen abrufen
            type = namespaces.shift();
//Entfernen Sie das Ding nach dem Punkt. Beim Löschen können Sie angeben, dass es gelöscht werden soll, z. B. click.d
​​​​​​ //Verwenden Sie den Ereignistyp, um diesen speziellen Namen aufzuzeichnen
                handler.type = namespaces.slice().sort().join(".");
//Ermitteln Sie, ob das Ereignis bereits im Ereignisobjekt vorhanden ist
            var handlers = events[type];
//Wenn das Ereignis nicht existiert, binden Sie das Ereignis an das Element                 if (!handlers) {
                    handlers = events[type] = {};
If (elem.addEventListener)
                             elem.addEventListener(type, handle, false);
                   else if (elem.attachEvent)
                       elem.attachEvent("on" type, handle);             }
//Funktion in die Ereignisliste des Elements einfügen
                 handlers[handler.guid] = handler;         });
elem = null; }
}

gevent.hander ist die Funktion, die tatsächlich vom gebundenen Ereignis
ausgeführt wird Es gibt auch einen Platz für spezielle Benennungen in gevent.hander, aber ich weiß nicht, wofür er verwendet wird
Das Ereignis wird zunächst im Handler
verpackt Informationen zur Verpackung finden Sie unter gevent.fix und setEvent
Die Hauptsache besteht darin, eine Kopie eines nativen Ereignisses zu erstellen und dann die inkompatiblen Methoden in kompatibler Schrift zu kombinieren
Holen Sie sich dann die Ereignisse (Ereignisliste) des Elements
Durchlaufen Sie dann die Ereignisliste, um festzustellen, ob der Typ der Schlüssel der Ereignisliste ist. Wenn ja, führen Sie das Ereignis
aus Der Rückgabewert wird beim Ausführen der Listenfunktion beurteilt
Wenn Sie „false“ zurückgeben, können Sie auch Event-Bubbling und Standardverhalten organisieren

Code kopieren Der Code lautet wie folgt:

win.gevent = {
handle: Funktion(Ereignis){
          var all, handlers;
//Verpackungsveranstaltung
          event = arguments[0] = gevent.fix( event || window.event );
         event.currentTarget = this;
​​​​ //Hier...
        var namespaces = event.type.split(".");
         event.type = namespaces.shift();
         all = !namespaces.length;
var namespace = RegExp("(^|\.)" namespaces.slice().sort().join(".*\.") "(\.|$)");
//Holen Sie sich die Ereignisliste des Verhaltens dieses Elements
            handlers = (data(this, "events") || {} )[event.type]; //Durchlaufe diese Ereignisliste und führe die auszuführenden Dinge aus
for (var j in handlers) {
            var handler = handlers[j];
If ( all || namespace.test(handler.type) ) {
                                  // Übergeben Sie einen Verweis auf die Handlerfunktion selbst
                              // Damit wir es später entfernen können
                            // Der Kommentar zu jq ist der Einfachheit halber so geschrieben, dass er auf dieses Ereignis verweist und es später entfernt
                                           // Aber beim Entfernen weiß ich nicht, wozu es dient. Und wenn es mehrere Ereignisse gibt, wird dieses Ereignis ersetzt
                  event.handler = handler;
//Führen Sie das Ereignis aus und es handelt sich um ein Ereignis, das mit einem Element aufgerufen wird. Sie können dieses Element im Ereignis ausführen und ret ist der Rückgabewert der Funktion
              var ret = handler.apply(this, arguments);
//Wenn ein Rückgabewert vorhanden ist und der Rückgabewert falsch ist, verhindert die Ausführung, dass das Ereignis sprudelt, und das Standardverhalten des Ausführungsereignisses wird blockiert If( ret !== undefiniert ){
                     event.result = ret;
If ( ret === false ) {
                         event.preventDefault();
                           event.stopPropagation();
                 }
                                                                                                                                                                                                  }
},
props: "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement viewwheelDelta which".split(" "),   Fix: Funktion(Ereignis){
//new setEvent gibt dem Ereignis ein Expando-Attribut. Wenn eines der Attribute vorhanden ist, bedeutet dies, dass das Ereignis generiert wurde und es nicht erforderlich ist, das Ereignis erneut zu umbrechen
            if ( event[expando] )
            Rückkehrereignis;
//Ein originelles Ereignis behalten
// neu Ein neues Ereignis. Dies unterscheidet sich vom ursprünglichen Ereignis
        var originalEvent = event;
        event = new setEvent(originalEvent);
// Den Attributwert des ursprünglichen Ereignisses abrufen. Informationen zu den vorhandenen Attributwerten finden Sie in this.props
for ( var i = this.props.length, prop; i; ){
              prop = this.props[ --i ];
            event[ prop ] = originalEvent[ prop ];
}
//Vereinheitlichen Sie die Zielelemente in event.target
If ( !event.target )
                event.target = event.srcElement || // Behebt #1925, bei dem srcElement möglicherweise auch nicht definiert ist //Wenn festgestellt wird, dass es sich um einen Textknoten handelt, holen Sie sich seinen übergeordneten Knoten
If ( event.target.nodeType == 3 )
             event.target = event.target.parentNode;
                             
If ( !event.latedTarget && event.fromElement )
event.latedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;         Rückkehrereignis;
                                            }
win.setEvent = function(src){
// Instanziierung ohne das Schlüsselwort „new“ zulassen
// Ereignisobjekt
If( src && src.type ){
This.originalEvent = src;
This.type = src.type;
// Ereignistyp
}sonst
This.type = src;
// timeStamp ist für einige Ereignisse in Firefox fehlerhaft (#3843)
// Wir verlassen uns also nicht auf den nativen Wert
This.timeStamp = now();
// Als behoben markieren
This[expando] = true;
}
Funktion returnFalse(){
Gibt false zurück;
}
Funktion returnTrue(){
return true;
}
setEvent.prototype = {
präventDefault: function() {
var e = this.originalEvent;
If( !e )
          zurück;
// Wenn „preventDefault“ vorhanden ist, führen Sie es für das ursprüngliche Ereignis aus
Wenn (e.preventDefault)
           e.preventDefault();
// andernfalls setze die returnValue-Eigenschaft des ursprünglichen Ereignisses auf false (IE)
e.returnValue = false;
},
stopPropagation: function() {
var e = this.originalEvent;
If( !e )
          zurück;
// wenn stopPropagation vorhanden ist, führe es auf dem ursprünglichen Ereignis aus
If (e.stopPropagation)
           e.stopPropagation();
// andernfalls setze die cancelBubble-Eigenschaft des ursprünglichen Ereignisses auf true (IE)
e.cancelBubble = true;
},
stopImmediatePropagation:function(){
This.isImmediatePropagationStopped = returnTrue;
This.stopPropagation();
},
isImmediatePropagationStopped: returnFalse
}; 



Ein vollständiges Beispiel

Code kopieren Der Code lautet wie folgt:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

以上内容只是自己的一些理解,水平有限,难免有错,望指正...

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript-Analyse- und Komprimierungstool JavaScript Analyser_Javascript-KenntnisseNächster Artikel：JavaScript-Analyse- und Komprimierungstool JavaScript Analyser_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen

• Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
• Detaillierte Erläuterung des JavaScript-Funktions-Curryings
• Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
• Angularjs integriert WeChat UI (weui)
• Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse