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>