Das Beispiel in diesem Artikel beschreibt, wie JavaScript Listening-Funktionen an Event-Handler bindet. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
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 zur Ereignisbindung, aber nur drei sind zuverlässig:
1. Traditionelle Bindemethode:
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, wenn er wiederholt registriert wird. Darüber hinaus wird die herkömmliche Bindungsmethode nur im Event-Bubbling ausgeführt.
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 sowohl die Erfassungs- als auch die Bubbling-Phase der Zeitverarbeitung; sie kann für denselben Ereignishandler desselben Elements registriert werden;
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 dasselbe Ereignishandle mehrmals registrieren.
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 auftritt, und nicht auf den aktuellen Knoten IE-Ereignis Es gibt keine entsprechende DOM-currentTarget-Eigenschaft im Objekt.
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;
};
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 );
}
Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.
