크로스 브라우저 이벤트 핸들러 (추가, 제거, 트리거)

IE7, IE9, Chrome 18, Firefox 12의 이벤트 (예 : 클릭)에 함수를 바인딩하려고하면 약간 혼란 스럽습니다. 그러나 이벤트에 관련된 기능을 제거하려고하면 IE7과 Firefox 만 기능을 해제 할 수 있습니다. 이것은 내가 사용하고있는 코드입니다. 내가 잘못하고있는 것은 무엇입니까 ?? 이 테스트 할크로스 브라우저 이벤트 핸들러 (추가, 제거, 트리거)

bindEvent:function(el,evtType,fn){ 

      if(el.addEventListener){ 
       el.addEventListener(evtType,fn,false); 
      } else { 
       if(el.attachEvent){ 


        var _el=el; 
        var f = function(){fn.call(_el,window.event);} 
        el.attachEvent('on'+evtType, f); 
        el[fn.toString()+evtType]=f; 


        //el.attachEvent('on'+evtType,fn) ; 

       } else { 

        el['on'+evtType]=fn; 
       } 
      } 

    return el; 

    }, 

    removeEvent: function(el,evtType, fn) { 

     if(el.removeEventListener){ 
      el.removeEventListener(evtType, fn, false); 
     }else if(el.detachEvent){ 
      el.detachEvent('on'+evtType,el[fn.toString()+evtType]); 
      el[fn.toString()+evtType]=null; 


     }else{ 

      el['on'+evtType]=function(){}; 

     } 

     return el; 
    }

내 코드는 다음과 같습니다

var a = document.getElementById('just_a_div'); 
bindEvent(a,'click',function(){alert('Hi There');});

그리고 난 거의 동일하게 사용 제거하려고하기 :

removeEvent(a,'click',function(){alert('Hi There');});

어떤 아이디어 나 할 수있는 미리 만들어진 조각 이 작업을 모든 브라우저에서 효율적으로 수행 하시겠습니까 ?? 솔루션이 나타나기를 바랍니다. 감사하게도.

출처

2012-04-20 Josh Guzman

후손을 위해, OP 코드는 2005 년 9 월에 John Resig가 게시 한 것에 기반한 것으로 보인다. 주석에있는 코드에 대해 상당한 비판이있다. 특히 메모리 누수와 관련하여 고려해야한다. [* Douglas *] (http://ejohn.org/projects/flexible-javascript-events/#comment-5882)). 그들은 게시물에서 언급되지 않았습니다. 또한 [* 널리 사용되는 AJAX 이벤트 처리기 등록 코드는 무엇입니까? *] (http://pankaj-k.net/weblog/2007/07/what_is_wrong_with_this_widely.html)의 비평을 참조하십시오. – RobG

코드는 IE8, Firefox 및 Chrome에서 my example으로 작동합니다 (이벤트는 5 초 후에 제거됩니다). 어쩌면 당신은 당신의 테스트 케이스에 오류가 있습니까? 테스트 케이스를 보여줄 수 있습니까?

=== UPDTAE === 그들이 동일한 매개 변수와 내용이있을 때 기능이 같은 결코 자바 스크립트에서

. 시도 : alert(function(){alert('Hi There');} == function(){alert('Hi There');}); 결과는 false입니다.

동일한 기능을 수행하는 경우 기능은 동일합니다. 따라서 var fn = function() { alert('clicked'); }; alert(fn == fn);은 true입니다.

my example과 같이 bindEvent 및 removeEvent 함수의 동일한 참조를 사용해야합니다.

출처

2012-04-20 06:22:20 scessor

이유에 대한 아이디어? –

오, 코드를 탐색했습니다. 시간 초과입니다. 죄송합니다. 실수입니다. –

@ codef0rmer 내가 전화하는 방법은 : bindEvent ('click', function() {return '안녕';}); 하지만 제거하려고 할 때 removeEvent ('click', function() {return '안녕';}); –

순수 자바 스크립트 코드로 모든 브라우저를 지원하기가 다소 어려우며 자바 스크립트 프레임 워크를 사용하는 것이 가장 좋습니다. JQuery & 물론 다른 프레임 워크가 많이 있습니다. 다른 목적으로 설계되었습니다.

출처

2012-04-20 05:45:59

jQuery는 이벤트 처리를위한 기본 JavaScript 동작을 완벽하게 구현하지 않습니다. jQuery를 사용하면 동일한 객체의 동일한 이벤트 유형에 대해 동일한 기능을 한 번 더 등록 할 수 있습니다. 그러나'addEventListener'의 기본 동작은 이것을 허용하지 않습니다. –

@AndrewD. 하지만 문제는 객체의 이벤트에 함수를 추가하는 것뿐입니다. –

브라우저 간 지원을 위해 jQuery를 사용하십시오. .bind을 사용하여 일정을 첨부하고 unbind을 사용하여 분리 할 수 있습니다.

출처

2012-04-20 06:23:13 codef0rmer

그건 내 목표 다. Jquery를 사용하지 말라. 나는 단지 객체의 이벤트에 함수를 첨부하기 만하면된다. –

크로스 브라우저 이벤트 핸들러 (추가, 제거, 트리거)

답변

관련 문제