So implementieren Sie die JavaScript-Bindungsüberwachungsfunktion für das Ereignishandle-js-Tutorial-php.cn

So implementieren Sie die JavaScript-Bindungsüberwachungsfunktion für das Ereignishandle

小云云

Freigeben： 2017-12-21 10:14:56

Original

1434 Leute haben es durchsucht

Das Binden von Event-Listening-Funktionen an Dom-Elemente in JavaScript ist eine sehr häufige Sache, aber auch hier gibt es viele Fehler. Verschiedene Browser bieten viele Methoden für die Ereignisbindung, aber nur drei sind zuverlässig. In diesem Artikel wird hauptsächlich die Methode von JavaScript zum Binden von Listening-Funktionen an Ereignishandler vorgestellt und die gängigen Techniken und Methoden der JavaScript-Ereignisbindung anhand von Beispielen analysiert. Freunde in Not können darauf verweisen, ich hoffe, es kann allen helfen.

1. Traditionelle Bindemethode:

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

Nach dem Login kopieren

a. Traditionelle Bindemethode, sehr einfach und stabil Der Funktionskörper zeigt 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(&#39;ID&#39;);
elem.addEventListener(&#39;click&#39; ,
          function( event ){
            alert(event.type + &#39; &#39; + this.innerHTML + 1);
          } ,
          false  //冒泡阶段执行
);
elem.addEventListener(&#39;click&#39; ,
          function( event ){
            alert(event.type + &#39; &#39; + this.innerHTML + 2);
          } ,
          false
);

Nach dem Login kopieren

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(&#39;a&#39;);
elem.attachEvent(&#39;onclick&#39; ,
  function(){
    alert(window.event.srcElement.innerHTML + &#39; &#39; + this.innerHTML + 1);
  }
);
elem.attachEvent(&#39;onclick&#39; ,
  function(){
    alert(window.event.srcElement.innerHTML + &#39; &#39; + this.innerHTML + 2);
  }
);

Nach dem Login kopieren

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;
};

Nach dem Login kopieren

Der obige Code stammt von Dean EdwardsaddEvent/removeEven

5. Browserübergreifende Methode zwei:

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

Nach dem Login kopieren

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:

Detaillierte Beispiele für Audio- und Video-Listener-Anwendungen in HTML5

vue hört auf das Scroll-Ereignis eines Elements Decken- oder Festpositionsanzeige, detaillierte Erklärung

Detaillierte Erklärung von Javascript-Ereignismodellen, Objekten, Überwachungs- und Liefercodebeispielen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die JavaScript-Bindungsüberwachungsfunktion für das Ereignishandle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!