JavaScript中为事件指定处理程序的五种方式分析(2)

事件处理程序的作用域不同。在IE中使用attachEvent(),事件处理程序会在全局作用域中运行,因此this等于window;而使用DOM0级方法,事件处理程序会在其所属元素的作用域中运行。

在IE中使用attachEvent()与使用DOM2级方法的区别:

添加多个事件处理程序的执行顺序不同。在IE中使用attachEvent(),可以添加多个事件处理程序,它们会按照添加它们的相反顺序触发;在DOM中使用addEventListener(),可以添加多个事件处理程序,但它们会按照添加它们的顺序触发。

通过attachEvent()添加的事件处理程序只能用detachEvent()来移除,但要求移除时传入的参数与添加事件处理程序时使用的参数相同,因此通过attachEvent()添加的匿名函数将无法移除,需要给detachEvent()传入attachEvent()中命名的函数才能正常移除。

5) 跨浏览器的事件处理程序

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

视情况分别使用DOM2级方法、IE方法、DOM0级方法来添加和移除事件,addHandler()和removeHandler()方法属于EventUtil对象。

① 先检测传入的元素是否存在DOM2级方法(传入的第三个参数为false以表示冒泡阶段);

② 再检测传入的元素是否存在IE的方法;

③ 最后检测传入的元素是否存在DOM0级方法(使用方括号语法将属性名指定为事件处理程序)。

var EventUtil = { addHandler:function(element, type, handler) { if (element.addEventListener) element.addEventListener(type, handler, false); else if (element.attachEvent) element.attachEvent("on" + type, handler); else element["on" + type] = handler; }, removeHandler:function(element, type, handler) { if (element.removeEventListener) element.removeEventListener(type, handler, false); else if (element.detachEvent) element.detachEvent(“on” + type, handler); else element["on" + type] = null; } }

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/01c21f94a5eb07a89785a6926ba1f0c9.html