转载

javaScript跨浏览器事件处理程序

最近在阅读 javascript高级程序设计 ，事件这一块还是有很多东西要学的，就把一些思考和总结记录下。

在事件处理，事件对象，阻止事件的传播等方法或对象存在着浏览器兼容性问题，开发过程中最好编写成一个通用的事件处理工具。

(function(){  var EU = {};  //...  //在这里添加一些通用的事件处理方法  //...  window.EventUtil = EU; })();

事件处理程序

事件的绑定主要为IE8以下浏览器做兼容处理：

IE8以下只支持事件冒泡

IE事件处理使用 attachEvent detachEvent

绑定事件

EU.addHandler = function(element,type,handler){  //DOM2级事件处理，IE9也支持  if(element.addEventListener){   element.addEventListener(type,handler,false);  }  else if(element.attachEvent){   //type加'on'   //IE9也可以这样绑定   element.attachEvent('on' + type,handler);  }  //DOM0级事件处理步，事件流也是冒泡  else{   element['on' + type] = handler;  } };

取消绑定事件

和绑定事件的处理基本一致，有一个注意点：

传入的 handler 必须与绑定事件时传入的相同（指向同一个函数）

EU.removeHandler = function(element,type,handler){  if(element.removeEventListener){   element.removeEventListener(type,handler);  }  else if(element.attachEvent){     element.detachEvent('on' + type,handler);  }  else{   //属性置空就可以   element['on' + type] = null;  } };

事件对象

注意点：

IE下 event 是全局对象，通过 window.event 取得

EU.getEvent = function(event){     return event || window.event; }

事件的目标

注意点:

IE下通过 attachEvent 绑定事件，内部 this 并非触发事件的 DOM ,而是window;

通过目标对象来获取 DOM 节点，IE下是 srcElement 属性，等同于其他浏览器的 target 属性

EU.addTarget = function(event){     return event.target || event.srcElement; }

阻止默认事件

EU.preventDefault = function(event){  if(event.preventDefault){   event.preventDefault();  }  //IE下处理  else{   event.returnValue = false; //默认为true  } }

关于事件默认行为

阻止事件传播

EU.stopPropagation = function(event){  if(event.stopPropagation){   event.stopPropagation();  }  //IE下处理  else{   event.cancelBubble = true;//默认为false，注意区分于returnValue  } }

注意点：

阻止的是 DOM层级 间的事件传播

比如：对于一个DOM元素，同时绑定捕获事件与冒泡事件，如果在捕获阶段使用 stopPropagation ,不会阻断冒泡事件的执行；

Demo地址： http://runjs.cn/detail/hyrdjfyj

如果对子元素和父元素以冒泡形式都绑定'click'事件，在子元素的事件处理中使用 stopPropagation 阻止事件传播,父元素绑定的 click 事件不会执行。

Demo地址： http://runjs.cn/detail/sf0t1bso

正文到此结束