JavaScript跨浏览器的添加删除事件绑定函数

      最近一直在忙项目，但在做项目的过程中，发现有很多东西都不知道，尤其是博大精深的JAVASCRIPT，最近在做页面的一些效果时，由于使用的是别人已做好的框架，所以，有一些标签的代码是自动生成的，无法控制，所以想到了用JAVASCRIPT代码来给其绑定事件来完成相应的效果。

     由于现在的浏览器层出不穷，我们以当前几款流行的浏览器作为参考吧。在网上查找资料时，JQUERY中直接使用Bind()便可以绑定实现操作的相关事件。但在这里我们只使用最原始的JAVASCRIPT来完成。

一、 javascript跨浏览器添加事件绑定 bind()

 

IE 的事件绑定函数是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 则两种都支持。使用jQuery就可以使用简单的bind()，或者$().click()之类的函数解决，而如果不使用JavaScript框架的时候，大家可是使用下面的封装bind()函数。

 

attachEvent("eventName",functionName) //eventName 为标签的事件名，如onclick.....，functionName为自定义的函数名

/************************************
 * 添加事件绑定
 * @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] );
       obj.attachEvent('on'+type,fn(args));  //fn(args)如有参数时，请注入参数，无参数时只需输入函数名便可即：fn
    } else
        obj.addEventListener( type, fn(args), false ); //同上解释
}

例如给document添加一个点击事件

var fn=function(args...) { //args为参数，可有可无，根据需求添加参数
      //实现方法体   

};
bind(document, "click", fn);

由于javascript的闭包问题，导致得不能直接读取外部的那个函数，不然就所有传递的参数都变为最后一个了，不管有无参数，当bind方法中有相应的循环的时候，便会导致一些问题，所以解决方案如下：

var fn=function(args...) { //args为参数，可有可无，根据需求添加参数
      return function(){

         // 1.实现的方法体

          //2. 调用的方法 //该函数为外部定义的一个执行函数

  }; 

};