书:"Pro JavaScript Techniques 精通JavaScript"之绑定/移除事件监听函数

本文链接：https://blog.csdn.net/lee576/article/details/2538656

//由Dean Edwards所编写的addEvent / removeEvent,这里对原作者的代码作了一些扩展 //http://dean.edwards.name/weblog/2005/10/add-event/

function addEvent(element, type, handler) {
  //为每一个事件处理函数赋予一个独立的ID
  if (!handler.$guid) handler.$guid = addEvent.guid++;
  //为元素建立一个事件类型的散列表
  if (!element.events) element.events = {};
  //为每对元素/事件建立一个事件处理函数的散列表
  var handlers = element.events[type];
  if (!handlers) {
    handlers = element.events[type] = {};
    //存储已有的事件处理函数(如果已存在一个)
    if (element["on" + type]) {
      handlers[0] = element["on" + type];
    }
  }
  //在散列表中存储事件处理函数
  handlers[handler.$guid] = handler;
  //赋予一个全局事件处理函数来处理所有工作
  element["on" + type] = handleEvent;
};
//创建独立ID的计数器
addEvent.guid = 1;

function removeEvent(element, type, handler) {
  //从散列表中删除事件处理函数
  if (element.events && element.events[type]) {
    delete element.events[type][handler.$guid];
  }
};

function handleEvent(event) {
  var returnValue=true;
  //获取事件对象(IE使用全局的事件对象)
  event = event ||fixEvent(window.event);
  //获取事件处理函数散列表的引用
  var handlers = this.events[event.type];
  //依次执行每个事件处理函数
  for (var i in handlers) {
    this.$handleEvent = handlers[i];
    if (this.$handlerEvent(event) === false) {
        returnValue = false;
    }
  }
};

//增加一些IE事件对象的缺乏的方法
function fixevent(event){
    //增加W3C标准事件方法
    event.preventDefault = fixEvent.preventDefault;
    event.stopPropagation = fixEvent.stopPropagation;
    return event;
}

fixEvent.preventDefault = function() {
   this.returnValue = false;
};

fixEvent.stopPropagation = function() {
   this.cancelBubble = true;
};

=========================================================== 1.addEvent的优点以下是Dean Edward 的 addEvent 事件绑定方法的优点可以在所有浏览器中工作,就算是更古老无任何支持的浏览器 this关键字可在所有的绑定函数中使用,指向的是当前元素中和了所有防止浏览器默认行为和阻止事件冒泡的各种浏览器特定函数不管浏览器类型，事件对象总是作为第一个对象传入 2.addEvent的缺点以下是Dean Edward 的 addEvent 事件绑定方法的缺点仅工作在冒泡阶段(因为它深入使用事件绑定的传统方法)