JS 事件监听兼容处理示例

前端之家收集整理的这篇文章主要介绍了JS 事件监听兼容处理示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
感兴趣的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧。
在事件监听处理方面,IE提供了attachEvent和detachEvent两个接口,而Firefox提供的是addEventListener和removeEventListener。最简单的兼容性处理就是封装这两套接口: JS代码如下:

/**
 * 事件监听兼容处理
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
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,handler) {
  if (elem.detachEvent) {
    elem.detachEvent("on" + eventName,handler);
  } else if (elem.removeEventListener) {
    elem.removeEventListener(eventName,false);
  }
}
然而,上面两个函数还没把问题完全解决。Firefox下,事件处理函数中的this指向被监听元素本身,而在IE下则不然。要解决这个问题,我首先想到的是prototype框架中的function.prototype.bind(下面简称bind): JS代码如下:

/**
 * 事件监听兼容处理
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
function addEvent(elem,handler.bind(elem));
  } else if (elem.addEventListener) {
    elem.addEventListener(eventName,false);
  }
}
这样做的结果是,再也无法移除事件处理函数。原因在于,移除事件处理函数时需要传入该函数的引用,而bind方法返回的是一个新函数而不是handler本身,且这个新函数的引用并没有保存下来。既然如此,只要把bind返回的引用给保存下来就好了。而存储结构就是个关键点。

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

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

/**
 * 事件监听兼容处理
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
var eventId = 0;
function delegate(elem,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.笔记) jb51.cc
 **/
function getDelegate(elem,handler) {
  try { return elem.events[eventName][handler.eventId]; } catch (e) {}
}
这里用try...catch的原因是,避免elem.events和elem.events[eventName]未创建时出错。

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

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

猜你在找的JavaScript相关文章