继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

DOM事件的跨浏览器解决

伏念先生
关注TA
已关注
手记 1
粉丝 1
获赞 3

1.IE事件处理程序:IE也提供了类似DOM2级事件处理程序
attachEvent()添加事件
detachEvent()删除事件
接收相同的两个参数,事件处理程序的名称和事件处理程序的函数。去掉了布尔值,不使用第三个参数的原因:IE8以及更早的浏览器版本只支持事件冒泡!
在ie下给btn3添加事件

```btn3.attachEvent('onclick',showMes);

注意:在ie事件处理程序上,又要把on加上

```btn3.detachEvent('onclick',showMes);

支持ie事件处理程序的浏览器主要有ie和opera两个浏览器。

2.跨浏览器事件处理程序
解决浏览器兼容问题的最好方法是能力检测,有这个能力就使用这种方法,没有就使用别的方法。浏览器支持addEventListener,就使用这个方法;浏览器支持attachEvent,就使用这个方法。跨浏览器事件处理最好封装在一个对象内。

//跨浏览器事件处理程序
var eventUtil = {
//添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){element.addEventListener(type,handler,false);} // DOM2级事件处理程序
else if(element.attachEvent){element.attachEvent('on'+type,handler);} // IE事件处理程序
else{element['on'+type]=handler;} // DOM0级事件处理程序
},
//删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){element.removeEventListener(type,handler,false);} // DOM2级事件处理程序
else if(element.detachEvent){element.detachEvent('on'+type,handler);} // IE事件处理程序
else{element['on'+type]=null;} //DOM0级事件处理程序
}
}
eventUtil.addHandler(btn3,'click',showMessage);

3.js中所有用'.'的地方都可以使用'[]'
如:对象的点击事件

```element.onclick===element['onclick']

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP