EventUtil对象 之 跨浏览器的事件处理程序
跨浏览器事件处理程序
最近在读javascript高级程序设计,读第十三章的时候有感。
开发中经常考虑的事情就是兼容性,样式兼容,脚本兼容等~~
经常考虑的对象常为: DOM 与 IE (这里的dom对象我理解为ie9,Firefox,chrome,safari,opera以上。IE则为ie8及以下)
首先介绍 事件流:描述的是从页面接收事件的顺序。分为事件冒泡与事件捕获。(ie9,Firefox,chrome,safari,opera支持DOM事件流。ie8及更早版本不支持DOM事件流).
事件处理程序:
1.html事件处理程序(即在html元素上执行事件,缺点是时差问题。比如点击事件,当事件处理程序不具备执行条件时,指页面刚渲染元素,用户就点击元素,可能会报错)
2.
2.1
2.1.1 DOM0级事件处理
var btn = document.getElementById("mybtn");
btn.onclick = function(){
alert(this.id); //"mybtn" this可以访问元素的任何属性和方法
};
btn.onclick = null; //删除事件处理程序
2.1.2 DOM2级事件处理程序
var btn = document.getElementById("mybtn");
//添加事件程序
btn.addEventListener("click",function(){alert(this.id)},falsle);
//移除事件程序 注意:移除时候的第二个参数如果为匿名函数,则会无效
var handler = function(){alert(this.id)};
btn.addEventListener("click",handler,falsle);
btn.removeEventListener("click",handler,falsle);
DOM0级事件处理程序的缺点:前面添加的事件处理程序会被后面添加的覆盖
DOM2级事件处理程序的优点:可以添加多个事件处理程序,会一一执行
2.2 IE事件处理程序
支持IE事件程序的只有ie和opera
var myDiv = document.getElementById("mydiv");
//添加事件程序 注意attachEvent()只有两个参数,第一个事件参数需要加 on
btn.attachEvent("onclick",function(){
alert(this.id); //mydiv
alert(this === window); //true 牢记这一点 ,在跨浏览器代码时,这点很重要
});
//attachEvent()也可以绑定对个事件程序
//移除事件程序 detachEvent(), 和dom一样 第二个参数不可为匿名函数
var handler = function(){alert(this.id)};
btn.attachEvent("onclick",handler,falsle);
btn.detachEvent("onclick",handler,falsle);
重点:跨浏览器事件处理程序
对象:EventUtil
方法:addHandler()、removeHandler() 职责为视情况来使用dom或者ie事件处理程序
方法的参数:要操作的元素,事件名称,事件处理程序
写法:
var myDiv = document.getElementById("mydiv");
var handler = function(){alert("clicked")};
var EventUtil = {
addHandler:function(element,type,handler){
if(element.addEventListener){
//ie9,opera,firefox。。及以上高浏览器的dom2级事件处理程序
element.addEventListener(type,handler,false);
}else{
//i8,opera及以下低版本的dom2级事件处理程序
element.attachEvent("on"+type,handler)
};
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else{
element.detachEvent("on"+type,handler)
};
};
};
//使用
//绑定事件处理程序
EventUtil.addHandler(myDiv,"click",handler);
//移除事件处理程序
EventUtil.removeHandler(myDiv,"click",handler);
总结:在需要考虑跨浏览器的事件处理程序的时候,只需添加上面介绍的EventUtil对象封装好的逻辑,及正确的引用
,就会对应不同的浏览器使用不同事件处理程序方法达到兼容性。
哇的一声就哭出来,第一次写博客,不知道用什么方法添加代码才能达到规范的格式(所有的代码复制过来的时候都是小字体,靠右对齐的,所以得手动调试
,以及干脆再敲一遍),不过呢,感觉还是挺开心的!有什么不对的地方希望大家能指出,我一定会学习及修改!
学习是一种态度!-.-