JavaScript必备：十大自定义函数解析

"本文主要介绍了JavaScript中最常用的十个自定义函数，包括用于添加和移除事件监听器的函数，这些函数在编写JavaScript代码时非常实用，尤其在不依赖类库的情况下。" 在JavaScript开发中，自定义函数是提高代码复用性和可维护性的关键。以下介绍的十个函数中，我们将重点关注添加事件监听器的`addEvent`函数，这是一个常见的需求，特别是在处理用户交互和DOM操作时。 首先，我们来看Scott Andrew的`addEvent`函数实现。这个函数支持DOM2.0的`addEventListener`方法（适用于现代浏览器）以及IE5+的`attachEvent`方法（适用于旧版Internet Explorer）。通过这样的方式，函数可以兼容各种浏览器。代码如下： ```javascript function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); // DOM2.0 return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); // IE5+ return r; } else { elm['on' + evType] = fn; // DOM0 } } ``` 然后是Dean Edwards的`addEvent`版本，它引入了事件处理函数的唯一标识符`$$guid`，以确保每个事件处理函数都能被正确地绑定和管理。此外，它还维护了一个事件类型的哈希表，用于存储事件处理函数。这个版本的代码如下： ```javascript // addEvent/removeEvent written by Dean Edwards, 2005 // with input from Tino Zijdel // 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; } ``` 这两个`addEvent`函数都解决了跨浏览器事件处理的问题，使得开发者能够轻松地为元素添加事件监听器，而无需关心浏览器的兼容性问题。掌握这些自定义函数对于JavaScript开发者来说是非常重要的，它们能帮助你在不使用类库或框架的情况下编写高效、可靠的代码。在实际开发中，你还可以根据需要扩展这些函数，例如添加事件移除功能（`removeEvent`）或其他特定的功能。