JS-浏览器事件绑定兼容性问题

---

1.事件绑定与解绑:

 绑定事件时:

 能使用addEventListener方法绑定的，就采用此方法.

 否则采用attachEvent方法绑定

 解绑事件时:

 能用removeEventListener方法绑定就用。

 否则就用detachEvent方法绑定。

1.代码演示：

代码如下（示例）：

//例.html部分
<div style="width:200px;height:200px;background-color: #999999;"></div>
<button>点我</button>
<script>
	//获取元素
	var div = document.querySelector('div');
    var btn = document.querySelector('button');
	
	//定义一个事件来判断处于哪个环境(非IE，IE)
	//绑定事件(元素,事件类型,callback):
	function addEvent(ele,type,func){
		if(ele.addEventListener){
			ele.addEventListener(type,func);
		}else if(ele.attachEvent){
			ele.addEventListener("on"+type, func);
		}else{
			ele["on"+type] = func;
		}
	};
	
	//解绑事件:
	function removeEvent(ele,type,func){
		if(ele.removeEventListener){
            ele.removeEventListener(type,func);
        }else if(ele.detachEvent){
            ele.detachEvent("on"+type, func);
        }else{
            ele["on"+type] = null;
        }
	};
	function divEvent(){
		console.log("这是一个div事件执行函数");
	}
	addEvent(div,'click', divEvent);
</script>

2.代码优化:

代码如下（示例）：

<script>
	//获取元素
	var div = document.querySelector('div');
    var btn = document.querySelector('button');
    //使用Document对象封装一下
    var Wrapper = {
    	add:function (ele,type,func){
            if(ele.addEventListener){
                ele.addEventListener(type, func);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+ type,func);
            }else{
                ele["on"+type] = func;
            }
        },

       //事件解绑
       remove:function (ele, type, func){
           if(ele.removeEventListener){
               ele.removeEventListener(type,func,false);
           }else if(ele.detachEvent){
               ele.detachEvent("on"+type, func);
           }else{
               ele["on"+type] = null;
           }
       }
	};
	//testing!
	function EventShow() {
       console.log("这是一个div事件执行函数");
    }
   function EventBtn() {
       console.log("这是一个btn事件执行函数");
   }

   wrapper.add(div,'click', EventShow);
   //wrapper.add(btn,'click',EventBtn);

   btn.onclick = function () {
       wrapper.remove(btn, 'click', ShowRemove);
   };
</script>  
	

---