JS 事件监听兼容处理示例

这篇文章主要为大家详细介绍了JS 事件监听兼容处理示例，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编罗X来看看吧。
在事件监听处理方面，IE提供了attachEvent和detachEvent两个接口，而Firefox提供的是addEventListener和removeEventListener。最简单的兼容性处理就是封装这两套接口： JS代码如下：

/**
 * 事件监听兼容处理
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function addEvent(elem, eventName, handler) {
　　if (elem.attachEvent) {
　　　　elem.attachEvent("on" + eventName, handler);
　　} else if (elem.addEventListener) {
　　　　elem.addEventListener(eventName, handler, false);
　　}
}

function removeEvent(elem, eventName, handler) {
　　if (elem.detachEvent) {
　　　　elem.detachEvent("on" + eventName, handler);
　　} else if (elem.removeEventListener) {
　　　　elem.removeEventListener(eventName, handler, false);
　　}
}

然而，上面两个函数还没把问题完全解决。Firefox下，事件处理函数中的this指向被监听元素本身，而在IE下则不然。要解决这个问题，我首先想到的是prototype框架中的function.prototype.bind（下面简称bind）： JS代码如下：

/**
 * 事件监听兼容处理
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function addEvent(elem, eventName, handler) {
　　if (elem.attachEvent) {
　　　　elem.attachEvent("on" + eventName, handler.bind(elem));
　　} else if (elem.addEventListener) {
　　　　elem.addEventListener(eventName, handler, false);
　　}
}

这样做的结果是，再也无法移除事件处理函数。原因在于，移除事件处理函数时需要传入该函数的引用，而bind方法返回的是一个新函数而不是handler本身，且这个新函数的引用并没有保存下来。既然如此，只要把bind返回的引用给保存下来就好了。而存储结构就是个关键点。

首先，一个页面中有任意个元素，所以每个元素都要有一个集合，每个元素所有事件处理函数的引用就存放在这个集合中。 其次，一个元素有多种事件（click、mouseover、mouseout等），同一个函数可以添加为多种事件的处理函数，所以每种事件的存储也必须是独立的。 最后，为每个事件处理函数添加一个唯一标识，以便在集合找到它。最简单的标识方法是数据库中常用的自动编号（递增）。

结合以上三点，编写一个生成事件代理的函数： JS代码如下：

/**
 * 事件监听兼容处理
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
var eventId = 0;
function delegate(elem, eventName, handler) {
　　var events = elem.events = elem.events || {}, // 创建事件集合
　　　　id = handler.eventId = handler.eventId || ++eventId; // 生成事件标识
　　events[eventName] = events[eventName] || {}; // 创建某种事件的集合

　　var trueHandler = function(e) { // 真正被添加的事件处理函数
　　　　handler.call(elem, e);
　　};

　　events[eventName][id] = trueHandler; // 记下函数的引用
}

相对应地，还要写一个获取事件代理的函数： JS代码如下：

/**
 * 事件监听兼容处理
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function getDelegate(elem, eventName, handler) {
　　try { return elem.events[eventName][handler.eventId]; } catch (e) {}
}

这里用try...catch的原因是，避免elem.events和elem.events[eventName]未创建时出错。

最后addEvent和removeEvent改进如下： JS代码如下：

/**
 * 事件监听兼容处理
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function addEvent(elem, eventName, handler) {
　　handler = delegate(elem, eventName, handler);
　　if (elem.attachEvent) {
　　　　elem.attachEvent("on" + eventName, handler);
　　} else if (elem.addEventListener) {
　　　　elem.addEventListener(eventName, handler, false);
　　}
}

function removeEvent(elem, eventName, handler) {
　　handler = getDelegate(elem, eventName, handler);
　　if (elem.detachEvent) {
　　　　elem.detachEvent("on" + eventName, handler);
　　} else if (elem.removeEventListener) {
　　　　elem.removeEventListener(eventName, handler, false);
　　}
}

本文来自：http://www.q1010.com/174/1634-0.html

注：关于JS 事件监听兼容处理示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：事件监听