js 添加事件 attachEvent（IE）和 addEventListener（W3C）的用法

最新推荐文章于 2022-04-19 18:26:06 发布

龙卷风之家

最新推荐文章于 2022-04-19 18:26:06 发布

阅读量2.1k

点赞数

分类专栏： JS 文章标签： ie c function 浏览器前端开发 delete

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一般我们在JS中添加事件,是这样子的

`1`	`obj.onclick=method`

这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢?

      
   1obj.onclick=method1; 
 
   2obj.onclick=method2; 
 
   3obj.onclick=method3;

如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法

      
   1//object.attachEvent(event,function); 
 
   2btn1Obj.attachEvent("onclick",method1); 
 
   3btn1Obj.attachEvent("onclick",method2); 
 
   4btn1Obj.attachEvent("onclick",method3);

使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是

method3->method2->method1

可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法

      
   1//element.addEventListener(type,listener,useCapture); 
 
   2btn1Obj.addEventListener("click",method1,false); 
 
   3btn1Obj.addEventListener("click",method2,false); 
 
   4btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3

做前端开发工程师,最悲剧的某过于浏览器兼容问题了,上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数,幸亏再有前人帮我们做了这件事

      
   01function  addEvent(elm, evType, fn, useCapture) { 
 
   02if  (elm.addEventListener) { 
 
   03elm.addEventListener(evType, fn, useCapture);//DOM2.0 
 
   04return  true; 
 
   05} 
 
   06else  if (elm.attachEvent) { 
 
   07var  r = elm.attachEvent(‘on‘ + evType, fn);//IE5+ 
 
   08return  r; 
 
   09} 
 
   10else  { 
 
   11elm['on' + evType] = fn;//DOM 0 
 
   12} 
 
   13}

下面是Dean Edwards 的版本

      
   01function  addEvent(element, type, handler) { 
 
   02//为每一个事件处理函数分派一个唯一的ID 
 
   03if  (!handler.$$guid) handler.$$guid = addEvent.guid++; 
 
   04//为元素的事件类型创建一个哈希表 
 
   05if  (!element.events) element.events = {}; 
 
   06//为每一个"元素/事件"对创建一个事件处理程序的哈希表  
 
   07var  handlers = element.events[type]; 
 
   08if  (!handlers) { 
 
   09handlers = element.events[type] = {}; 
 
   10//存储存在的事件处理函数(如果有) 
 
   11if  (element["on"  + type]) { 
 
   12handlers[0] = element["on" + type]; 
 
   13} 
 
   14} 
 
   15//将事件处理函数存入哈希表 
 
   16handlers[handler.$$guid] = handler; 
 
   17//指派一个全局的事件处理函数来做所有的工作  
 
   18element["on" + type] = handleEvent; 
 
   19}; 
 
   20//用来创建唯一的ID的计数器 
 
   21addEvent.guid = 1; 
 
   22function  removeEvent(element, type, handler) { 
 
   23//从哈希表中删除事件处理函数 
 
   24if  (element.events && element.events[type]) { 
 
   25delete  element.events[type][handler.$$guid]; 
 
   26} 
 
   27}; 
 
   28function  handleEvent(event) { 
 
   29var  returnValue = true; 
 
   30//抓获事件对象(IE使用全局事件对象) 
 
   31event = event || fixEvent(window.event); 
 
   32//取得事件处理函数的哈希表的引用 
 
   33var  handlers = this.events[event.type]; 
 
   34//执行每一个处理函数 
 
   35for  (var i  in handlers) {  
 
   36this.$$handleEvent = handlers[i]; 
 
   37if  (this.$$handleEvent(event) === false) {  
 
   38returnValue = false; 
 
   39} 
 
   40} 
 
   41return  returnValue; 
 
   42}; 
 
   43//为IE的事件对象添加一些“缺失的”函数 
 
   44function  fixEvent(event) { 
 
   45//添加标准的W3C方法 
 
   46event.preventDefault = fixEvent.preventDefault; 
 
   47event.stopPropagation = fixEvent.stopPropagation; 
 
   48return  event; 
 
   49}; 
 
   50fixEvent.preventDefault =  function() {  
 
   51this.returnValue = false;  
 
   52}; 
 
   53fixEvent.stopPropagation =  function() {  
 
   54this.cancelBubble = true;  
 
   55};

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

最后贡献一个HTML5工作组的版本：

      
   01var  addEvent=(function(){ 
 
   02if(document.addEventListener){ 
 
   03return  function(el,type,fn){ 
 
   04if(el.length){ 
 
   05for(var i=0;i&lt;el.length;i++){ 
 
   06addEvent(el[i],type,fn); 
 
   07} 
 
   08}else{ 
 
   09el.addEventListener(type,fn,false); 
 
   10} 
 
   11}; 
 
   12}else{ 
 
   13return  function(el,type,fn){ 
 
   14if(el.length){ 
 
   15for(var i=0;i&lt;el.length;i++){ 
 
   16addEvent(el[i],type,fn); 
 
   17} 
 
   18}else{ 
 
   19el.attachEvent(‘on‘+type,function(){ 
 
   20return  fn.call(el,window.event); 
 
   21}); 
 
   22} 
 
   23}; 
 
   24} 
 
   25})();

可能细心的读者发现了IE的attachEvent和W3C标准的addEventListener绑定多个事件的执行顺序是不一样的

龙卷风之家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 添加事件 attachEvent（IE）和 addEventListener（W3C）的用法

一般我们在JS中添加事件,是这样子的 1obj.onclick=method这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢? 1obj.onclick=method1; 2obj.onclick=method2;
复制链接

扫一扫