이벤트 핸들에 대한 JavaScript 바인딩 청취 기능을 구현하는 방법

JavaScript에서 이벤트 수신 함수를 Dom 요소에 바인딩하는 것은 매우 흔한 일이지만 여기에도 많은 버그가 있습니다. 다양한 브라우저가 이벤트 바인딩을 위한 다양한 방법을 제공하지만, 이 기사에서는 리스닝 함수를 이벤트 핸들러에 바인딩하는 JavaScript의 방법을 주로 소개하고, JavaScript 이벤트 바인딩의 일반적인 기술과 방법을 예제 형식으로 분석합니다. 도움이 필요한 친구들이 참고할 수 있고 모두에게 도움이 되기를 바랍니다.

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는 현재 노드가 아닌 이벤트가 발생하는 노드를 가리킵니다. 이벤트 객체 에는 동등한 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;
};

위 코드는 Dean EdwardsaddEvent/removeEven

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

흐름은 버블링 이벤트와 캡처 이벤트로 나눌 수 있습니다. 대부분의 HTML 요소에는 하이퍼링크, 제출 버튼 등과 같은 자체 기본 동작이 포함되어 있습니다. 바인딩 이벤트에 "return false"를 추가하여 기본 동작을 방지할 수 있습니다. 병음에 관심이 있으시면 본 웹사이트의 JS 이벤트 버블링 및 이벤트 캡처에 대한 자세한 소개 관련 소개를 참고하시기 바랍니다.

관련 권장 사항:

HTML5의 오디오 및 비디오 리스너 애플리케이션 예에 대한 자세한 설명

vue 모니터링 스크롤 이벤트 요소의 천장 또는 고정 위치 표시에 대한 자세한 설명

javascript 이벤트 모델, 객체, 모니터링 , 배송 코드 예시에 대한 자세한 설명

위 내용은 이벤트 핸들에 대한 JavaScript 바인딩 청취 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!