delegate.js 是一个轻量级的事件委托库,delegate.js 中封装了:on()、once()、off()、stop() 等事件侦听相关的方法。delegate.js 库对浏览器的兼容性问题也处理的算是不错了,主流的浏览器都可以正常使用。并且 delegate.js 的 API 借鉴了 github 上其它类似的库,使得 delegate.js 的 API 使用起来非常灵活和方便。
Install
delegate.js 支持 AMD 和 CommonJS 规范的模块调用方式,可以直接使用 npm 安装,也可以使用 script 标签引入到页面。
npm install
npm i -S @yaohaixiao/delegate.js
script
<script src="/path/to/delegate.js"></script>
Usage
基本用法 – 事件冒泡
const handler = function(evt) {
const $li = evt.delegateTarget
console.log(`你点击的 li 节点的 id 为 ${$li.id}`)
}
// 默认使用事件冒泡
delegate('#list').on('.item', 'click', handler)
基本用法 – 事件捕获
const handler = function(evt) {
const $li = evt.delegateTarget
console.log(`你点击的 li 节点的 id 为 ${$li.id}`)
}
// 默认使用事件捕获
delegate('#list').on('.item', 'mouseenter', handler)
强制使用事件捕获
const handler = function(evt) {
const $li = evt.delegateTarget
console.log(`你点击的 li 节点的 id 为 ${$li.id}`)
}
// 默认使用事件冒泡
delegate('#list').on('.item', 'click', handler, true)
使用不同的类型的选择器
const handler = function(evt) {
const $li = evt.delegateTarget
console.log(`你点击的 li 节点的 id 为 ${$li.id}`)
}
// 类选择器
delegate('.list').on('.item', 'click', handler)
// 标签选择择器
delegate('ul').on('li', 'click', handler)
// 以数组/类似数组的元素为基础
delegate('#list').on(document.querySelectorAll('.item'), 'click', handler)
事件只触发一次 – delegate.on()
const handler = function(evt) {
const $li = evt.delegateTarget
console.log(`你点击的 li 节点的 id 为 ${$li.id}`)
}
// 设置 delegate.on() 方法的 once 属性为 true
delegate('#list').on('.item', 'click', handler, true)
// 使用 once 方法只触发一次
delegate('#list').once('.item', 'click', handler)
取消事件委托
const $list = document.querySelector('#list')
const handler = function(evt) {
const $li = evt.delegateTarget
console.log(`你点击的 li 节点的 id 为 ${$li.id}`)
}
// 使用 off() 方法取消事件委托
delegate('#list').on('.item', 'click', handler)
.off($list, 'click', callback)
// 使用 destroy() 方法取消事件委托
delegate('#list').on('.item', 'click', handler)
.destroy()
Demo
演示地址:https://yaohaixiao.github.io/delegate.js/
License
Licensed under MIT License.