添加事件的兼容性写法

Posted zp0818

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了添加事件的兼容性写法相关的知识,希望对你有一定的参考价值。

通常,我们为某个控件元素添加事件时,用的是:

1 ele.onclick=fn1(){};
2 或者
3 ele.onclick=fn1;  //此时不需要加括号,调用的是整个方法而不是return的结果
4 function fun1(){}

这种绑定事件的方法简单高效,但对同一个控件的同一个动作进行绑定时,前面的事件容易被重叠。故需要对控件的事件进行监听。

监听的方法有两种,分别为addEventListener和attachEvent。

  • 首先addEventListener进行了解

          ele.addEventListener(type,listener,useCapture);共三个参数

参数  参数说明
ele  需要绑定的控件或是html结点
type  触发事件名称。注意:需要去掉‘on’,为‘click’或者‘mouseover’等
listener  事件的监听函数,即要执行的方法。注意:在此,函数名不需要加()。因为不调用的是整个函数,而不是返回的结果。
useCapture

事件监听方式,只能是true和false。

true,采用capture(捕获模式:从外向内);

false,采用bubbling(冒泡模式:从内向外)。

如无特殊要求,一般是false。

 

 

 

 

 

 

 

 

 

是W3C所支持的事件绑定方法,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数

1 //ele.addEventListener(type,listener,useCapture);
2 btn1.addEventListener("click",fn1,false);
3 btn1.addEventListener("click",fn2,false);
4 btn1.addEventListener("click",fn3,false);

  执行的顺序是fn1-fn2-fn3

 

  • attechEvent的了解

  ele.attechEvent(type,function);

参数  参数说明
type 触发事件名称。注意:不能去掉‘on’,为‘onclick’或者‘onmouseover’等
function 事件的监听函数,即要执行的方法。同样的不带()。

 

    IE8.0及其以下版本(互补版本)

1 //ele.attachEvent(type,function);
2 btn1.attachEvent("onclick",fn1);
3 btn1.attachEvent("onclick",fn2);
4 btn1.attachEvent("onclick",fn3);

  执行顺序fn3-fn2-fn1

 

  • 所以,采取这种事件的绑定及解绑的方法必须要采取兼容性的写法:
  1. 封装:(利用对象.属性方法调用)
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <button>赋诗</button>
 9 
10 
11 <script>
12 
13     var btn = document.getElementsByTagName("button")[0];
14 
15     EventListen = { 
16         addEvent: function (ele,fn,str) {
17             //通过判断调用的方式兼容IE678
18             //判断浏览器是否支持该方法,如果支持那么调用,如果不支持换其他方法
19             if(ele.addEventListener){
20                 //直接调用
21                 //火狐谷歌IE9+支持addEventListener
22                 ele.addEventListener(str,fn);
23             }else if(ele.attachEvent){
24                 //IE678支持attachEvent
25                 ele.attachEvent("on"+str,fn);
26             }else{
27                 //在addEventListener和attachEvent都不存在的情况下,用此代码
28                 ele["on"+str] = fn;
29             }
30         },
31         removeEvent: function (ele,fn,str) {
32             if(ele.removeEventListener){
33                 ele.removeEventListener(str,fn);
34             }else if(ele.detachEvent){
35                 ele.detachEvent("on"+str,fn);
36             }else{
37                 ele["on"+str] = null;
38             }
39         }
40     };
41 
42 //    btn.addEventListener("click",fn);
43     EventListen.addEvent(btn,fn,"click");
44 
45     EventListen.removeEvent(btn,fn,"click");
46 
47     function fn(){  //定义fn函数
48         alert(1);
49     }
50 
51 </script>
52 </body>
53 </html>

    

 

以下内容为转载内容

  • 转载版第一个
 1 function addEvent(ele, type, fn, useCapture) {
 2     if (ele.addEventListener) {
 3         ele.addEventListener(type, fn, useCapture);//DOM2.0
 4         return true;
 5     }
 6     else if (ele.attachEvent) {
 7         var r = ele.attachEvent(‘on‘ + type, fn);//IE5+
 8         return r;
 9     }
10     else {
11         ele[‘on‘ + type] = fn;//DOM 0
12     }
13 }        
  • 下面是Dean Edwards 的版本
 1 function addEvent(element, type, handler) {
 2     //为每一个事件处理函数分派一个唯一的ID
 3     if (!handler.$$guid) 
 4         handler.$$guid = addEvent.guid++;
 5 
 6     //为元素的事件类型创建一个哈希表
 7     if (!element.events) 
 8         element.events = {};
 9 
10     //为每一个"元素/事件"对创建一个事件处理程序的哈希表
11     var handlers = element.events[type];
12     if (!handlers) {
13         handlers = element.events[type] = {};
14         //存储存在的事件处理函数(如果有)
15         if (element["on" + type]) {
16             handlers[0] = element["on" + type];
17         }
18     }
19 
20     //将事件处理函数存入哈希表
21     handlers[handler.$$guid] = handler;
22 
23     //指派一个全局的事件处理函数来做所有的工作
24     element["on" + type] = handleEvent;
25 };
26 
27 //用来创建唯一的ID的计数器
28 addEvent.guid = 1;
29 function removeEvent(element, type, handler) {
30     //从哈希表中删除事件处理函数
31     if (element.events && element.events[type]) {
32         delete element.events[type][handler.$$guid];
33     }
34 };
35 function handleEvent(event) {
36     var returnValue = true;
37     //抓获事件对象(IE使用全局事件对象)
38     event = event || fixEvent(window.event);
39     //取得事件处理函数的哈希表的引用
40     var handlers = this.events[event.type];
41     //执行每一个处理函数
42     for (var i in handlers) {
43         this.$$handleEvent = handlers[i];
44         if (this.$$handleEvent(event) === false) {
45             returnValue = false;
46         }
47     }
48     return returnValue;
49 };
50 
51 //为IE的事件对象添加一些“缺失的”函数
52 function fixEvent(event) {
53     //添加标准的W3C方法
54     event.preventDefault = fixEvent.preventDefault;
55     event.stopPropagation = fixEvent.stopPropagation;
56     return event;
57 };
58 fixEvent.preventDefault = function() {
59     this.returnValue = false;
60 };
61 fixEvent.stopPropagation = function() {
62     this.cancelBubble = true;
63 };          

  功能非常强悍,解决IE的this指向问题,event总是作为第一个参数传入,跨浏览器就更不在话下。

  3.最后一个HTML5的版本:

 1     var addEvent=(function(){
 2         if(document.addEventListener){
 3             return function(el,type,fn){
 4                 if(el.length){
 5                     for(var i=0;i&lt;el.length;i++){
 6                         addEvent(el[i],type,fn);
 7                     }
 8                 }else{
 9                     el.addEventListener(type,fn,false);
10                 }
11             };
12         }else{
13             return function(el,type,fn){
14                 if(el.length){
15                     for(var i=0;i&lt;el.length;i++){
16                         addEvent(el[i],type,fn);
17                     }
18                 }else{
19                     el.attachEvent(‘on‘+type,function(){return fn.call(el,window.event);});
20                 }
21             };
22         }
23     })();

 

以上是关于添加事件的兼容性写法的主要内容,如果未能解决你的问题,请参考以下文章

学鼠标滚轮事件兼容写法

js滚轮事件兼容写法

js事件对象兼容性写法

常用原生JS兼容写法

常用原生JS方法总结(兼容性写法)

事件委托 兼容性写法