添加事件的兼容性写法
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 <!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<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<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 })();
以上是关于添加事件的兼容性写法的主要内容，如果未能解决你的问题，请参考以下文章