> 웹 프론트엔드 > JS 튜토리얼 > JavaScript는 크로스 브라우저 추가 및 삭제 이벤트 바인딩 기능을 구현합니다.examples_javascript 기술

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

WBOY
풀어 주다: 2016-05-16 15:47:14
원래의
1083명이 탐색했습니다.

이 기사의 예에서는 브라우저 간 이벤트 바인딩 기능 추가 및 삭제의 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 프로그래밍 설계에 도움이 되기를 바랍니다.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿