十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

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

百恒网络 2017-01-13 650

为了以跨浏览器的方式处理事件,不少开发人员会使用能够隔离浏览器差异的 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.jxbh.cn/app/index.html 如转载请注明出处!


400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×