添加事件的兼容性写法

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

1 ele.οnclick=fn1(){};
2 或者
3 ele.οnclick=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 <!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     })();

转载于:https://www.cnblogs.com/zp0818/p/9236605.html

添加事件的兼容性写法相关推荐

js的一些兼容性写法
①添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 ...
js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载...
js添加事件.移除事件.阻止冒泡.阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 01 var addEvent = ...
JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲事件的冒泡机制和添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段捕获阶段是指从父层往子层找.比如 <body> ...
JS之事件处理（一）--事件概述、非IE浏览器/IE浏览器中的事件绑定、解决浏览器事件绑定兼容性问题
一.概述描述:事件本质是一种交互操作,事件通常与函数配合使用,当事件发生时函数才会执行事件是由三部分组成的:事件源事件类型事件处理程序事件源:事件被触发的对象–谁事件类型:如何触发什么事 ...
js 添加事件 attachEvent 和 addEventListener 的用法
一般我们在JS中添加事件,是这样子的 obj.οnclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.οnclick=method1; obj. ...
ASP.NET自定义控件组件开发第三章为控件添加事件后篇
第三章为控件添加事件后篇前一篇文章只是简单的说了下事件,但是大家应该方法,在ASP.NET自定义控件中只是简单那么定义事件是行不通.如果大家开发的是WinForm中的事件,之前的定义可能没有什 ...
Javascript事件机制兼容性解决方案
本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...
js添加事件 attachEvent 和addEventListener的用法
一般我们在JS中添加事件,是这样子的: obj.onclick = method 这种绑定事件的方式,兼容主流浏览器,但是如果一个元素上添加多次同一个事件呢??? obj.onclick = meth ...
js 添加事件 attachEvent 和addEventListener 的用法
2019独角兽企业重金招聘Python工程师标准>>> 一般我们在JS中添加事件,是这样子的 1 obj.οnclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个 ...

添加事件的兼容性写法

添加事件的兼容性写法相关推荐

最新文章

热门文章