您的位置：首页 > Web前端

解决跨浏览器DOM事件处理

2017-03-31 21:19 176 查看

<!DOCTYPE html>
<html>
<head>
<title>事件流</title>
<meta charset="utf-8">   //若不写这行，IE浏览器会乱码，chrome不会，不清楚为什么，还没研究=。=
</head>
<body>
<input type="button" value="按钮" id="btn1">
<script type="text/javascript">
var btn1=document.getElementById('btn1');
function showMes(){
alert('hello world!');
}
var eventUtil={
//添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){   //DOM2级
element.addEventListener(type,handler,false);
}else if(element.attachEvent){  //IE事件处理
element.attachEvent('on'+type,handler);
}else{                          //DOM0级
element['on'+type]=handler;
//注意element['on'+type] === element.onclick()，当遇到这种方法名称不确定的时候用[]
}
},
//删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){    //DOM2级
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){  //IE事件处理
element.detachEvent('on'+type,handler);
}else{                          //DOM0级
element['on'+type]=null;
}
}
}
eventUtil.addHandler(btn1,'click',showMes);
</script>
</body>
</html>

参考：

http://www.imooc.com/video/2138

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dom 前端浏览器 chrome ie

相关文章推荐

新的分享

章节导航