delegate.js

Download delegate.js

GitHub      Issues

delegate.js

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>

Demo

<ul id="list" class="list">
  <li id="item-1" class="item">Item 1</li>
  <li id="item-2" class="item">Item 2</li>
  <li id="item-3" class="item">Item 3</li>
  <li id="item-4" class="item">Item 4</li>
  <li id="item-5" class="item">Item 5</li>
  <li id="item-6" class="item">Item 6</li>
</ul>

<script>
const callback = function(evt) {
  const $li = evt.delegateTarget
  const $textarea = document.querySelector('#log-textarea')
  $textarea.value += `你点击的 li 节点的 id 为 ${$li.id}\r`
}

delegate('#list').on('.item', 'click', callback)
</script>
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

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').once('.item', 'click', handler)
                 .off($list, 'click', callback)

// 使用 destroy() 方法取消事件委托
delegate('#list').once('.item', 'click', handler)
                 .destroy()

License

Licensed under MIT License.