title: Cross-Browser Event Handler (Add, Remove, Trigger)
body: <p>I'm a little confused, when I try to Bind a Function to an event (like click) in IE7,IE9, Chrome 18, Firefox 12 it's work great, but when I try to remove the associated function to the event, only IE7 and Firefox are capable of dis-attach the function.
  This is the code i'm using, what i'v doing wrong ??</p>
  
  <pre><code>    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;
      }
  </code></pre>
  
  <p>My codes to test this are: </p>
  
  <pre><code>var a = document.getElementById('just_a_div');
  bindEvent(a,'click',function(){alert('Hi There');});
  </code></pre>
  
  <p>And to try to remove i use almost the same:</p>
  
  <pre><code>removeEvent(a,'click',function(){alert('Hi There');});
  </code></pre>
  
  <p>Any Ideas or some pre-made Snippets that can do this task efficiently on all browsers??
  Hope a solution can appear, Eternally grateful.</p>