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对象封装好的逻辑，及正确的引用
，就会对应不同的浏览器使用不同事件处理程序方法达到兼容性。

　　　哇的一声就哭出来，第一次写博客，不知道用什么方法添加代码才能达到规范的格式(所有的代码复制过来的时候都是小字体，靠右对齐的，所以得手动调试
，以及干脆再敲一遍)，不过呢，感觉还是挺开心的！有什么不对的地方希望大家能指出，我一定会学习及修改！

　　　学习是一种态度！-.-

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有