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

最新推荐文章于 2025-07-30 16:36:32 发布

iteye_11002

最新推荐文章于 2025-07-30 16:36:32 发布

阅读量82

点赞数

文章标签： javascript 数据结构与算法 ViewUI

本文介绍了一种跨浏览器的事件绑定方法addEvent，该方法由Dean Edwards编写并进行了扩展。addEvent能够实现在不同浏览器中一致的事件绑定效果，并解决了this关键字指向、事件对象差异等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//由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 事件绑定方法的缺点仅工作在冒泡阶段(因为它深入使用事件绑定的传统方法)