这部分代码在“Pro JavaScript技术”的JS addEvent函数实现中的目的是什么?

What's the purpose of this part of code in this JS addEvent function implementation of "Pro JavaScript Techniques"?

本文关键字:实现 函数 addEvent 是什么 JS 这部分 Pro JavaScript 技术 代码      更新时间:2023-09-26

在"Pro JavaScript Techniques"一书中,有一个addEvent函数,代码如下:

function addEvent(element, type, handler) {
    // assign each event handler a unique ID
    if (!handler.$$guid) handler.$$guid = addEvent.guid++;
    // create a hash table of event types for the element
    if (!element.events) element.events = {};
    // create a hash table of event handlers for each element/event pair
    var handlers = element.events[type];
    if (!handlers) {
        handlers = element.events[type] = {};
        // What's the purpose of this if???
        // store the existing event handler (if there is one)
        if (element["on" + type]) {
            handlers[0] = element["on" + type];
        }
    }
    // store the event handler in the hash table
    handlers[handler.$$guid] = handler;
    // assign a global event handler to do all the work
    element["on" + type] = handleEvent;
}

现在我理解了它的大部分内容,并且理解只有当事件处理程序添加到没有该事件先前事件处理程序的元素时,才第一次为每个元素/事件创建hash table of event handlers for each element/event pair。但是我不理解store existing event handler (if there is one)部分。在书中没有说任何关于它和评论store the existing event handler (if there is one)(什么事件处理程序?)没有让我清楚。它的目的是什么?

To…存储现有的处理程序。

当你添加一个事件时,如果已经有该事件的处理程序,并且你要将相同类型的第二个事件绑定到相同的元素,那么它会保存现有的处理程序,并基本上附加新的处理程序到它。否则,您将覆盖旧的事件,这是"addEvent"函数的设计目的。