JavaScript工具函数合集：on与trigger方法及HTML转义

"JavaScript常用工具函数大全，包括为元素添加on和trigger方法，以及HTML转义功能" 在JavaScript开发中，经常会遇到需要扩展内置对象功能的情况，以提高代码的可读性和可维护性。本文提供的工具函数就是针对Element和NodeList对象进行扩展，增加了事件处理和触发功能，同时提供了HTML编码和解码的实用方法。 首先，让我们来看看如何为元素添加`on`方法。原生的JavaScript提供了`addEventListener`方法来为元素绑定事件监听器，但这里我们通过`Element.prototype.on`将这个功能进一步简化。这样，我们就可以像操作数组一样，方便地为多个元素绑定同一事件监听器： ```javascript Element.prototype.on = Element.prototype.addEventListener; NodeList.prototype.on = function (event, fn) { [].forEach.call(this, function (el) { el.on(event, fn); }); return this; }; ``` 这段代码将`addEventListener`方法赋值给了`Element.prototype.on`，然后扩展了`NodeList.prototype.on`，它接收一个事件名`event`和回调函数`fn`，使用`forEach`遍历NodeList中的每个元素并调用`on`方法。这样，我们就可以一次性为一组元素绑定同一个事件，例如： ```javascript document.querySelectorAll('.my-elements').on('click', function () { console.log('Element clicked!'); }); ``` 接下来是`trigger`方法，用于触发元素上的自定义事件。`Element.prototype.trigger`创建了一个新的`HTMLEvents`事件，并调用了`dispatchEvent`来触发该事件： ```javascript Element.prototype.trigger = function (type, data) { var event = document.createEvent("HTMLEvents"); event.initEvent(type, true, true); event.data = data || {}; event.eventName = type; event.target = this; this.dispatchEvent(event); return this; }; NodeList.prototype.trigger = function (event) { [].forEach.call(this, function (el) { el["trigger"](event); }); return this; }; ``` 这使得我们可以轻松地在元素上模拟事件，例如： ```javascript document.querySelector('#my-element').trigger('myCustomEvent', { someData: 'example' }); ``` 此外，HTML转义是防止XSS攻击的重要手段。`HtmlEncode`函数用于转义HTML特殊字符，避免它们被解析为HTML标签： ```javascript function HtmlEncode(text) { return text .replace(/&/g, "&") .replace(/"/g, '"') .replace(/</g, "<") .replace(/>/g, ">"); } ``` 这个函数会将`&`替换为`&amp;`，`"`替换为`&quot;`，`<`替换为`&lt;`，`>`替换为`&gt;`，确保文本在插入HTML时不会被解释为标签。 在某些场景下，我们可能还需要解码这些HTML实体，但这部分代码在提供的摘要中没有给出。通常，你可以使用`decodeURIComponent`或第三方库如`he`来实现HTML解码。 这些工具函数提高了JavaScript开发的便利性，特别是在处理DOM事件和防止XSS攻击方面。通过扩展基本对象，我们可以编写更简洁、更安全的代码。