addEventListener和attachEvent介绍, 原生js和jquery的兼容性写法

也许很多同仁一听到事件监听，第一想到的就是原生js的 addEventListener()事件，的确如此，当然如果只是适用于现代浏览器（IE9、10、11 | ff, chorme, safari, opera（非windows系统自带，可安装的Browsers） ）,你只需要了解这一个事件的正确拼写和参数就OK啦。

但是小生仅今天要介绍的是 添加事件监听的兼容性写法，所以，如果同仁们无需做兼容的话，建议只是了解或略过 哈/....

首先，介绍一下，事件监听的事件有两个，对，你没听错，是两个：

First: element.addEventListener(event,function(e),useCapture) 

　　　适用范围：　现代浏览器（IE9、10、11 | ff, chorme, safari, opera）

　　　参数介绍：

　　　　　event: 必须。字符串，指定事件名。(注： 不要是 on+'someEvent', just 'someEvent' is ok).

　　　　　function: 必须。指定要事件触发时执行的函数。

　　　　　　　(注：function(e) e:事件对象会作为第一个参数传入函数, 事件对象的类型取决于特定的事件,例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。)

　　　　　useCapture: 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

　　　　　　　(注：true:function(e) 在捕获阶段执行， false:function(e)在冒泡阶段执行，（默认为 false ).　

Second: element.attachEvent(eType,function(e))

　　适用范围：IE 6、7、8

　　参数介绍：

　　　　eType: 必须。字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。

　　　　function：必须。定要事件触发时执行的函数。

详细了解 参考：http://www.jb51.net/article/18220.htm （本人觉得 参数介绍上 比较细）

由于以上两个事件的适用范围有所不同，所以催生了以下的兼容写法(上代码)：

1.原生 Javascript 写法：

 var EventUtil = {

     // 添加事件监听
     add: function(element, type, callback){

         if(element.addEventListener){
             element.addEventListener(type, callback, false);
         } else if(element.attachEvent){
             element.attachEvent('on' + type, callback);
         } else {
             element['on' + type] = callback;
         }
     }
 }

　　使用方式：

 var at = document.getElementbyId('atemp');
 EventUtil.add(at, 'click', function(){

     console.log('被点击了');
 });

　　扩展：

 var EventUtil = {

     // 添加事件监听
     add: function(element, type, callback){

         if(element.addEventListener){
             element.addEventListener(type, callback, false);
         } else if(element.attachEvent){
             element.attachEvent('on' + type, callback);
         } else {
             element['on' + type] = callback;
         }
     },

     // 移除事件监听
     remove: function(element, type, callback){

         if(element.removeEventListener){
             element.removeEventListener(type, callback, false);
         } else if(element.detachEvent){
             element.detachEvent('on' + type, callback);
         } else {
             element['on' + type] = null;
         }

     },

     // 跨浏览器获取 event 对象
     getEvent: function(event){

         return event ? event : window.event;
     },

     // 跨浏览器获取 target 属性
     getTarget: function(event){

         return event.target || event.srcElement;
     },

      阻止事件的默认行为
     preventDefault: function(event){

         if(event.preventDefault){
             event.preventDefault();
         } else {
             event.returnValue = false;
         }
     },

     // 阻止事件流或使用 cancelBubble
     stopPropagation: function(){

         if(event.stopPropagation){
             event.stopPropagation();
         } else {
             event.cancelBubble = true;
         }
     }

 };

2.jQuery $.fn.extend 写法（此方法在js方法上进行的 改进，如下）

 $.fn.extend({
             addEvent:function( type, handle, bool){
                 var el, thisLen=this.length;
                 bool?bool=bool:bool=false;
                 if( thisLen == 1){
                     el = this[0];        //jquery对象转成 js对象
                     el.addEventListener ? el.addEventListener(type, handle, bool ):
                             el.attachEvent('on'+type, handle);
                 }else {
                     for( var i=0;i<thisLen;i++ ){
                         el = this[i];
                         el.addEventListener ? el.addEventListener(type, handle, bool ):
                                 el.attachEvent('on'+type, handle);
                     }
                 }
             }
         }

　　使用方式：

$('p').addEvent('click',function(e){ alert(‘哦，我被点啦。。。’); });

　　

　　扩展：

　　　　同上扩展（不再描述）

ok,打完收工！！！