关于js跨浏览器的事件处理程序机制及实例

发布时间：2022/01/11 丨 文章来源：未知 丨 浏览次数：

为了以跨浏览器的方式处理事件，不少开发人员会使用能够隔离浏览器差异的 JavaScript 库，还有 一些开发人员会自己开发合适的事件处理的方法。自己编写代码其实也不难，只要恰当地使用能力检 测即可。要保证处理事件的代码能在大多数浏览器下一致地运行，只需关 注冒泡阶段。

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

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

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;

}

}

};

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

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

var btn = document.getElementById("myBtn");

var handler = function(){

alert("Clicked");

};

EventUtil.addHandler(btn, "click", handler);

//这里省略了其他代码

EventUtil.removeHandler(btn, "click", handler);

addHandler()和 removeHandler()没有考虑到所有的浏览器问题，例如在 IE中的作用域问题。 不过，使用它们添加和移除事件处理程序还是足够了。此外还要注意，DOM0 级对每个事件只支持一 个事件处理程序。好在，只支持 DOM0级的浏览器已经没有那么多了，因此这对你而言应该不是什么 问题。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌APP开发公司-网络 http://www.huicuiwang.cn/app/index.html 如转载请注明出处!