标签：
要保证处理事件的代码能在大多数浏览器下一致地运行，只需关注冒泡阶段。
第一个要创建的方法是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级对每个事件只支持一个事件处理程序。
标签：
原文地址：http://www.cnblogs.com/Yvette1014/p/5466399.html
