Ausführliche Erläuterung der JavaScript-Implementierung von Beispielen für Bindungsüberwachungsfunktionen für Ereignishandles

In diesem Artikel wird hauptsächlich die Methode zum Binden von Listening-Funktionen an Ereignishandler in Form von Beispielen analysiert. Ich hoffe, dass er allen helfen kann .

Das Binden von Event-Listening-Funktionen an Dom-Elemente in JavaScript ist eine sehr häufige Sache, aber es gibt auch hier viele Fehler. Verschiedene Browser bieten viele Methoden für die Ereignisbindung, aber nur drei sind zuverlässig:

1. Traditionelle Bindungsmethode:

elem.onclick = function( event ){
  alert(event.type + 'this.innerHTML');
};

a. Die traditionelle Bindungsmethode ist sehr einfach und stabil. Dies zeigt im Funktionskörper auch auf den Knoten, der das Ereignis verarbeitet (z. B. den Knoten, der derzeit den Ereignishandler ausführt).

b. Ein Event-Handler eines Elements kann nur eine Funktion registrieren. Bei wiederholter Registrierung kommt es außerdem zu einem Überschreiben.

2. W3C-Standardbindungsmethode:

var elem = document.getElementById('ID');
elem.addEventListener('click' ,
          function( event ){
            alert(event.type + ' ' + this.innerHTML + 1);
          } ,
          false  //冒泡阶段执行
);
elem.addEventListener('click' ,
          function( event ){
            alert(event.type + ' ' + this.innerHTML + 2);
          } ,
          false
);

a. Diese Bindungsmethode unterstützt auch die Zeitverarbeitung. Es gibt zwei Stufen : Erfassen und Bubbling; derselbe Event-Handler desselben Elements kann mehrere Listening-Funktionen registrieren, außerdem zeigt dies innerhalb der Listening-Funktion auf das aktuelle Element.

b. Der beliebte IE-Browser unterstützt diese Registrierungsmethode jedoch nicht.

3. IE-Ereignishandler-Registrierungsmethode:

var elem = document.getElementById('a');
elem.attachEvent('onclick' ,
  function(){
    alert(window.event.srcElement.innerHTML + ' ' + this.innerHTML + 1);
  }
);
elem.attachEvent('onclick' ,
  function(){
    alert(window.event.srcElement.innerHTML + ' ' + this.innerHTML + 2);
  }
);

a. Diese Bindungsmethode kann für dasselbe Ereignis gelten Handle ist mehrfach registriert.

b. Das Ereignismodell des IE unterstützt keine Ereigniserfassung. Dies zeigt im Hauptteil der Abhörfunktion nicht auf das aktuelle Element und window.event.srcElement zeigt auf den Knoten, auf dem das Ereignis aufgetreten ist, nicht auf den aktuellen Knoten , und in Es gibt keine entsprechende DOM-Eigenschaft currentTarget im Ereignisobjekt des IE.

4. Browserübergreifende Methode eins:

function addEvent(element, type, handler) {
 if (!handler.guid)handler.guid = addEvent.guid++;
 if (!element.events) element.events = {};
 var handlers = element.events[type];
 if (!handlers) {
  handlers = element.events[type] = {};
  if (element["on" + type]) {
   handlers[0] = element["on" + type];
  }
 }
 handlers[handler.$$guid] = handler;
 element["on" + type] = handleEvent;
};
addEvent.guid = 1;
function removeEvent(element, type, handler) {
 if (element.events && element.events[type]) {
  delete element.events[type][handler.$$guid];
 }
};
function handleEvent(event) {
 var returnValue = true;
 event = event || fixEvent(window.event);
 var handlers = this.events[event.type];
 for (var i in handlers) {
  this.$$handleEvent = handlers[i];
  if (this.$$handleEvent(event) === false) {
   returnValue = false;
  }
 }
 return returnValue;
};
function fixEvent(event) {
 event.preventDefault = fixEvent.preventDefault;
 event.stopPropagation = fixEvent.stopPropagation;
 return event;
};
fixEvent.preventDefault = function() {
 this.returnValue = false;
};
fixEvent.stopPropagation = function() {
 this.cancelBubble = true;
};

Der obige Code stammt von Dean EdwardsaddEvent/removeEven

5. Browserübergreifende Methode zwei:

function addEvent( obj, type, fn ) {
 if ( obj.attachEvent ) {
  obj['e'+type+fn] = fn;
  obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
  obj.attachEvent( 'on'+type, obj[type+fn] );
 } else
  obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
 if ( obj.detachEvent ) {
  obj.detachEvent( 'on'+type, obj[type+fn] );
  obj[type+fn] = null;
 } else
  obj.removeEventListener( type, fn, false );
}

Darüber hinaus kann der Ereignisstrom in sprudelnde Ereignisse und Erfassungstypen unterteilt werden Ereignisse enthalten die meisten HTML-Elemente ihr eigenes Standardverhalten, z. B. Hyperlinks, Schaltflächen zum Senden usw. Wir können sein Standardverhalten verhindern, indem wir „return false“ zum Bindungsereignis hinzufügen. Wenn Sie sich für Pinyin interessieren, lesen Sie bitte die entsprechende Einführung zur detaillierten Einführung von Event Bubbling und Event Capture in JS auf dieser Website.

Verwandte Empfehlungen:

Vue überwacht Scrollereignisse und eine detaillierte Erklärung der Decken- oder Festpositionsanzeige eines Elements

So implementieren Sie das ReactJS-Überwachungs-Page-Scroll-Ereignis

Detaillierte Erläuterung der Anwendungsbeispiele für Ereignisüberwachung und Ereignisveröffentlichung in Node.js

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der JavaScript-Implementierung von Beispielen für Bindungsüberwachungsfunktionen für Ereignishandles. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!