>  기사  >  웹 프론트엔드  >  이벤트 handler_javascript 기술에 대한 JavaScript 바인딩 청취 함수 예제에 대한 자세한 설명

이벤트 handler_javascript 기술에 대한 JavaScript 바인딩 청취 함수 예제에 대한 자세한 설명

WBOY
WBOY원래의
2016-05-16 15:25:431063검색

이 기사의 예에서는 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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.