이벤트 핸들에 대한 바인딩 청취 함수 예제의 JavaScript 구현에 대한 자세한 설명

이 글은 주로 JavaScript에서 이벤트 핸들러에 리스닝 함수를 바인딩하는 방법을 소개합니다. JavaScript 이벤트 바인딩의 일반적인 기술과 주의 사항을 예제 형식으로 분석합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

JavaScript에서 이벤트 수신 함수를 Dom 요소에 바인딩하는 것은 매우 일반적인 일이지만 여기에도 많은 버그가 있습니다. 다양한 브라우저가 이벤트 바인딩을 위한 다양한 방법을 제공하지만 신뢰할 수 있는 방법은 3가지뿐입니다.

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 이벤트 버블링 및 이벤트 캡처에 대한 자세한 소개 관련 소개를 참고하시기 바랍니다.

관련 권장 사항:

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

페이지 스크롤 이벤트를 모니터링하기 위해 ReactJS를 구현하는 방법

이벤트 사용 예에 ​​대한 자세한 설명 Node.js의 모니터링 및 이벤트 게시

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