이 기사의 예에서는 JavaScript가 수신 기능을 이벤트 핸들러에 바인딩하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
JavaScript에서 이벤트 수신 함수를 Dom 요소에 바인딩하는 것은 매우 일반적인 일이지만 여기에도 많은 버그가 있습니다. 다양한 브라우저가 이벤트 바인딩을 위한 다양한 방법을 제공하지만 신뢰할 수 있는 방법은 3가지뿐입니다.
1. 기존 바인딩 방법:
elem.onclick = function( event ){ alert(event.type + 'this.innerHTML'); };
a. 기존 바인딩 방법은 매우 간단하고 안정적입니다. 함수 본문에서는 이벤트를 처리하는 노드(예: 현재 이벤트 핸들러를 실행하는 노드)도 가리킵니다.
b. 요소의 이벤트 핸들러는 하나의 함수만 등록할 수 있습니다. 반복적으로 등록하면 덮어쓰기가 발생하며 기존 바인딩 방법은 이벤트 버블링에서만 실행됩니다.
2. W3C 표준 바인딩 방법:
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. 이 바인딩 방법은 시간 처리의 캡처 및 버블링 단계를 모두 지원합니다. 동일한 요소의 동일한 이벤트 핸들러에 대해 여러 청취 기능을 등록할 수 있으며 이는 청취 기능 내에서 현재 요소를 가리킵니다.
b. 그러나 널리 사용되는 IE 브라우저는 이 등록 방법을 지원하지 않습니다.
3. IE 이벤트 핸들러 등록 방법:
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. 이 바인딩 방법은 동일한 이벤트 핸들을 여러 번 등록할 수 있습니다.
b. IE의 이벤트 모델은 이벤트 캡처를 지원하지 않습니다. 이는 수신 함수 본문에서 현재 요소를 가리키지 않으며 window.event.srcElement는 현재 노드가 아닌 이벤트가 발생하는 노드를 가리킵니다. IE의 이벤트 객체에는 동등한 DOM currentTarget 속성이 없습니다.
4. 크로스 브라우저 방법 1:
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. 크로스 브라우저 방법 2:
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 ); }
이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.