事件处理程序-跨浏览器
事件处理程序：其实就是dom节点的用户操作动作，例如onclick、onmouseover、onblur等。
事件处理程序有三种方式：
1、HTML方式，直接在html的dom节点上面添加事件属性。
例如：<input type="button" onclick="xxx()">.
这种方式用的较少，因为有两个缺点：A、事件与html的文档结构耦合比较高，增加了维护的工作量；B、不能为一个事件添加多个处理函数
2、DOM0级事件处理程序：这种方式用的比较多。
例如：
添加事件：nodeObject.onclick=function(){};
删除事件：nodeObject.onclick=null;
3、DOM2级事件处理程序：这种方式存在浏览器兼容性问题
IE中写法：
添加事件：nodeObject.attachEvent("onclick",function(){xxx});
移除事件：nodeObject.detachEvent("onclick",function(){xxx});
其他浏览器写法：
添加事件：nodeObject.addEventListener('click',function(){},false);
移除事件：nodeObject.removeEventListener('click',function(){},false);
对于事件处理程序我们一般建议自己进行封装，兼容跨浏览器的问题。
var eventUtil = {
addEventHandle:function(element,eventType,fn){//添加事件，这里eventType最好传递不带“on”的，便于后面拼接on
if(element.addEventListener){//非IE情况下，使用addEventListener
element.addEventListener(eventType,fn,false);
}else if(element.attachEvent){//IE情况下，使用attachEvent
element.attachEvent('on'+eventType,fn);
}else{//不支持DOM2级情况下，使用DOM0级的方式
element['on'+eventType] = fn;
}
},
removeEventHandle:function(element,eventType,fn){//添加事件，这里eventType最好传递不带“on”的，便于后面拼接on
if(element.removeEventListener){//非IE情况下，使用removeEventListener
element.removeEventListener(eventType,fn,false);
}else if(element.detachEvent){//IE情况下，使用detachEvent
element.detachEvent('on'+eventType,fn);
}else{//不支持DOM2级情况下，使用DOM0级的方式
element['on'+eventType] = null;
}
}
};
详见代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理跨浏览器</title>
</head>
<body>
<input type="button" id="btn1" value="HTML事件处理程序" onclick="showMessage()">
<input type="button" id="btn2" value="DOM0级事件处理程序">
<input type="button" id="btn3" value="DOM2级事件处理程序">
<script type="text/javascript">
function showMessage(){
alert("通过html中input的onclick属性调运");
}
function showMessage1(){
alert("通过兼容方法调运onclick的第一个函数");
}
function showMessage2(){
alert("通过兼容方法调运onclick的第二个函数");
}
//下面通过DOM0级处理
var btn2 = document.getElementById('btn2');
btn2.onclick = function(){
alert("通过btn2的nodeObject添加onclick属性");
};
/**
* 下面封装DOM事件处理的兼容性代码
* [eventUtil description]
* @type {Object}
*/
var eventUtil = {
addEventHandle:function(element,eventType,fn){//添加事件，这里eventType最好传递不带“on”的，便于后面拼接on
if(element.addEventListener){//非IE情况下，使用addEventListener
element.addEventListener(eventType,fn,false);
}else if(element.attachEvent){//IE情况下，使用attachEvent
element.attachEvent('on'+eventType,fn);
}else{//不支持DOM2级情况下，使用DOM0级的方式
element['on'+eventType] = fn;
}
},
removeEventHandle:function(element,eventType,fn){//添加事件，这里eventType最好传递不带“on”的，便于后面拼接on
if(element.removeEventListener){//非IE情况下，使用removeEventListener
element.removeEventListener(eventType,fn,false);
}else if(element.detachEvent){//IE情况下，使用detachEvent
element.detachEvent('on'+eventType,fn);
}else{//不支持DOM2级情况下，使用DOM0级的方式
element['on'+eventType] = null;
}
}
};
var btn3 = document.getElementById('btn3');
eventUtil.addEventHandle(btn3,'click',showMessage1);
eventUtil.addEventHandle(btn3,'click',showMessage2);
/*eventUtil.removeEventHandle(btn3,'click',showMessage1);
eventUtil.removeEventHandle(btn3,'click',showMessage2);*/
</script>
</body>
</html>共同学习，写下你的评论
评论加载中...
作者其他优质文章
