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 + 'this.innerHTML'); };
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 );
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); } );
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 ); }
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!