JavaScript는 크로스 브라우저 추가 및 삭제 이벤트 바인딩 기능을 구현합니다.examples_javascript 기술

이 기사의 예에서는 브라우저 간 이벤트 바인딩 기능 추가 및 삭제의 JavaScript 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

IE의 이벤트 바인딩 기능은 attachmentEvent이고, Firefox와 Safari는 addEventListener입니다. Opera는 둘 다 지원합니다. jQuery를 사용하면 간단한 바인딩()을 사용하거나 $().click()과 같은 함수를 사용하여 문제를 해결할 수 있습니다. JavaScript 프레임워크를 사용하지 않는 경우 다음과 같은 캡슐화된 바인딩() 함수를 사용할 수 있습니다.

이벤트 바인딩 바인딩 추가()

/************************************
* 添加事件绑定
* @param obj  : 要绑定事件的元素
* @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick".
* @param fn  : 事件处理函数
************************************/
function bind( 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);
}

예를 들어 문서에 클릭 이벤트를 추가합니다.

var fn=function(){
  alert("Hello, World!!");
};
bind(document,"click", fn);

이벤트 바인딩 삭제 unbind()

위의 바인딩() 함수에 대한 unbind()

/************************************
* 删除事件绑定
* @param obj : 要删除事件的元素
* @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick"
* @param fn : 事件处理函数
************************************/
function unbind( obj, type, fn ){
  if( obj.detachEvent){
    obj.detachEvent('on'+type, obj[type+fn]);
    obj[type+fn]=null;
  }else
    obj.removeEventListener( type, fn,false);
}

예를 들어 첫 번째 바인딩된 문서 클릭 이벤트를 삭제합니다.

코드 복사 코드는 다음과 같습니다.

unbind(document,"click",fn);

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.