跨浏览器的事件处理程序

要保证处理事件的代码能在大多数浏览器下一致地运行，只需关注冒泡阶段。

第一个要创建的方法是addHandler(),它的职责是视情况分别使用DOM0级方法、DOM2级方法或IE方法来添加事件。这个方法属于一个名叫EventUtil的对象。addHandler()方法接受3个参数：要操作的元素、事件名称和事件处理程序函数。

与addHandler()对应的方法是removeHandler(),它也接受相同的参数。这个方法的职责是移出之前添加的事件处理程序—无论该事件处理程序是采取什么方式添加到元素中的，如果其他方法无效，默认采用DOM0级方法。

EventUtil的用法如下所示。

 1 var EventUtil = {
 2 
 3     addHandler:function (element,type,handler) {
 4          if(element.addEventListener){
 5              element.addEventListener(type, handler,false);
 6          } else if (element.attachEvent) {
 7              element.attachEvent("on" + type,handler);
 8          }else {
 9              element["on" + type] = handler;
10          }
11     },
12 
13     removeHandler:function (element,type,handler) {
14          if (element.removeEventListener) {
15              element.removeEventListener(type, handler,false);
16          } else if (element.detachEvent) {
17              element.detachEvent("on" + type,handler);
18          }else {
19              element["on" + type] = null;
20          }
21     }
22 };

这两个方法首先都会检测传入的元素中是否存在DOM2级方法。如果存在DOM2级方法，则使用该方法：传入事件类型、事件处理程序函数和第三个参数false(表示冒泡阶段)。如果存在的是IE的方法，则采取第二种方案。最后一种可能就是使用DOM0级方法(在现代浏览器中，应该不会执行这里的代码)。此时，我们使用的是方括号语法来将属性名指定为事件处理程序，或者将属性设置为null。

可以像下面这样使用EventUtil对象：

1 var btn = document.getElementById("myBtn");
2 var handler = function () {
3      alert("Clicked"); 
4 };
5 
6 EventUtil.addHandler(btn,"click",handler);
7 
8 EventUtil.removeHandler(btn,"click",handler);

注意：DOM0级对每个事件只支持一个事件处理程序。

转载于:https://www.cnblogs.com/Yvette1014/p/5466399.html