# delegate.js **Repository Path**: yaohaixiao/delegate.js ## Basic Information - **Project Name**: delegate.js - **Description**: delegate.js - 一个轻量级的 JavaScript 事件委托库。 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-03 - **Last Updated**: 2026-03-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # delegate.js [![npm version](https://img.shields.io/npm/v/@yaohaixiao/delegate.js)](https://www.npmjs.com/package/@yaohaixiao/delegate.js) ![Gzip size](http://img.badgesize.io/https://cdn.jsdelivr.net/gh/yaohaixiao/delegate.js/delegate.min.js?compression=gzip&label=gzip%20size) [![prettier code style](https://img.shields.io/badge/code_style-prettier-07b759.svg)](https://prettier.io) [![Coverage](https://codecov.io/gh/yaohaixiao/delegate.js/branch/main/graph/badge.svg)](https://codecov.io/gh/yaohaixiao/delegate.js) [![npm downloads](https://img.shields.io/npm/dt/@yaohaixiao/delegate.js)](https://npmcharts.com/compare/@yaohaixiao/delegate.js?minimal=true) [![MIT License](https://img.shields.io/github/license/yaohaixiao/delegate.js.svg)](https://github.com/yaohaixiao/delegate.js/blob/master/LICENSE) delegate.js - 一个轻量级的 JavaScript 事件委托库。 ## 项目初衷 编写 delegate.js 的主要是为初学 JavaScript 的朋友了解 [JavaScript 中的事件委托](https://juejin.cn/post/7387801635328983049) 实现机制而开发。当然，delegate.js 也可以应用到实际的产品开发中。 ## 特点 - 原生 JavaScript 编写，无任何依赖； - 支持 UMD 规范，同时也提供 ES6 模块调用； - 支持创建和绑定自定义事件，并且可以手动触发自定义事件； - 采用 jQuery 链式调用语法，调用语法简洁方便； - 文件体积小(Gzip：3KB)，加载速度快； ## Browsers support | [IE / Edge](https://github.com/yaohaixiao/delegate.js/)
IE / Edge | [Firefox](https://github.com/yaohaixiao/delegate.js/)
Firefox | [Chrome](https://github.com/yaohaixiao/delegate.js/)
Chrome | [Safari](https://github.com/yaohaixiao/delegate.js/)
Safari | [Opera](https://github.com/yaohaixiao/delegate.js/)
Opera | |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | IE11, Edge | last 10 versions | last 10 versions | last 10 versions | last 10 versions | ## 安装说明 delegate.js 支持 UMD 规范和 ES6 的模块调用方式，可以在 Node.js 环境中使用 npm 安装，也可以在浏览器中使用 script 标签引入到页面。 ### npm 安装 ```sh # install from npmjs.com npm i -S @yaohaixiao/delegate.js # install from github.com npm i -S @yaohaixiao/delegate.js --registry=https://npm.pkg.github.com ``` ### 浏览器中调用 在浏览器中调用 delegate.js，可以选择调用 jsdelivr 提供的 CDN 服务中的文件，也可以使用本地的 delegate.js 文件。 #### CDN 调用 JS 文件 ```html ``` #### 本地调用 JS 文件 ```html ``` ### Node.js 中调用 ```js const delegate = require('@yaohaixiao/delegate.js') ``` ### ES6 模块中调用 ```js // 调用 delegate 实例对象 import delegate from '@yaohaixiao/delegate.js/delegate' // 或者调用 core 版本 // core 版本仅提供以下几个方法： // on() // once() // off() // click() // mouseenter() // mouseleave() // change() // createEvent() // trigger() // purge() // destroy() import delegate from '@yaohaixiao/delegate.js/delegate.core' // 调用 Emitter 构造函数 import Emitter from '@yaohaixiao/delegate.js/emitter' // 或者调用 Emitter Core 版本 import Emitter from '@yaohaixiao/delegate.js/emitter.core' // 调用单个（on/once/off）方法 import on from '@yaohaixiao/delegate.js/on' import once from '@yaohaixiao/delegate.js/once' import off from '@yaohaixiao/delegate.js/off' ``` ## API 文档 delegate.js 中封装了：on()、once()、off() 等事件侦听相关的常用方法。delegate.js 的 API 借鉴了 jQuery 的链式调用模式，掉起来非常方便。 ## Options ### el Type: `HTMLElement|String` Default: `` 必须，要添加事件代理的 DOM 元素或者 DOM 元素的选择器。 ```js // 使用 DOM 节点选择器 delegate('#list') // 使用 DOM 节点 const $list = document.getElementById('list') delegate($list) ``` ## Properties ### $el Type: `HTMLElement` Default: `` 添加事件代理的 DOM 元素。 ```js // 使用 DOM 节点选择器 const $emitter = delegate('#list') $emitter.$el // => 获取到 list 列表 DOM 元素 ``` ## methods delegate.js 体积虽然小（Gzip 压缩后仅 3KB），却提供了十分丰富的事件代理相关的操作方法： ### at(type, fn[, data, context, once = false]) #### Description at() 方法用来绑定事件处理器。 #### Parameters ##### type Type: `String` Default: `` （必须）type 用以设置触发的事件类型。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ```js const handler = function(evt, data) { console.log('data', data) // => { user: 'Robert' } } // 使用 DOM 节点选择器 const $emitter = delegate('#list') $emitter.at('click', handler, { user: 'Robert' }) ``` ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向： - 当设置为 true 时，则事件处理器回调函数的 this 上下文指向为 data 对象； - 如未指定 context，则事件处理器回调函数的 this 上下文指向为 Emitter 对象； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 ```js const handler = function(evt) { const $li = evt.delegateTarget console.log(`你点击的 li 节点的 id 为 ${$li.id}`) } const $emitter = delegate('#list') // once 属性为 true，点击事件处理器仅触发一次 $emitter.at('click', handler, true) // 默认每次点击都会触发执行点击事件处理器 $emitter.at('click', handler) ``` #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ### on(selector, type, fn[, data, context, once = false]) #### Description on() 方法用来绑定事件代理处理器。 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ```js const handler = function(evt) { const $li = evt.delegateTarget console.log(`你点击的 li 节点的 id 为 ${$li.id}`) } const $emitter = delegate('.list') // 类选择器 $emitter.on('.item', 'click', handler) // 标签选择择器 $emitter.on('li', 'click', handler) // 子类选择器 $emitter.on('li > span', 'click', handler) ``` ##### type Type: `String` Default: `` （必须）type 用以设置触发的事件类型。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ```js const handler = function(evt, data) { console.log('data', data) // => { user: 'Robert' } } // 使用 DOM 节点选择器 const $emitter = delegate('#list') $emitter.on('li', 'click', handler, { user: 'Robert' }) ``` ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向： - 当设置为 true 时，则事件处理器回调函数的 this 上下文指向为 data 对象； - 如未指定 context，则事件处理器回调函数的 this 上下文指向为 Emitter 对象； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 ```js const handler = function(evt) { const $li = evt.delegateTarget console.log(`你点击的 li 节点的 id 为 ${$li.id}`) } const $emitter = delegate('#list') // once 属性为 true，点击事件处理器仅触发一次 $emitter.on('.item', 'click', handler, true) // 默认每次点击都会触发执行点击事件处理器 $emitter.on('.item', 'click', handler) ``` #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ### once(selector, type, fn[, data, context]) #### Description once() 方法用来绑定事件代理处理器，仅触发一次。 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ```js const handler = function(evt) { const $li = evt.delegateTarget console.log(`你点击的 li 节点的 id 为 ${$li.id}`) } const $emitter = delegate('.list') // 类选择器 $emitter.once('.item', 'click', handler) // 标签选择择器 $emitter.once('li', 'click', handler) // 子类选择器 $emitter.once('li > span', 'click', handler) ``` ##### type Type: `String` Default: `` （必须）type 用以设置触发的事件类型。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ```js const handler = function(evt, data) { console.log('data', data) // => { user: 'Robert' } } // 使用 DOM 节点选择器 const $emitter = delegate('#list') $emitter.once('li', 'click', handler, { user: 'Robert' }) ``` ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ### off(type[, fn]) #### Description off() 方法用来接触绑定的事件代理处理器。 #### Parameters ##### type Type: `String` Default: `` （可选）type 指定需要接触绑定的事件类型，不指定则解绑 $el 上绑定的所有事件处理器。 ```js const handler = function(evt) { const $li = evt.delegateTarget console.log(`你点击的 li 节点的 id 为 ${$li.id}`) } const callback = function(evt) { const $li = evt.delegateTarget console.log(`你双击的 li 节点的 id 为 ${$li.id}`) } const fn = function(evt) { const $li = evt.delegateTarget console.log(`你鼠标划过的 li 节点的 id 为 ${$li.id}`) } const $emitter = delegate('#list') // 绑定了 $emitter.on('.item', 'click', handler) $emitter.on('.item', 'click', fn) $emitter.on('.item', 'dbclick', callback) $emitter.on('.item', 'mouserenter', fn) // 解除 click 事件绑定的 handler 事件处理器 $emitter.off($list, 'click', callback) // 解除 #list 绑定的所有事件处理器 $emitter.off($list) ``` ##### fn Type: `Function` Default: `` （可选）fn 指定需要接触绑定的事件处理器回调函数，如果不指定则接触 $el 绑定的所有指定 type 的事件处理器。 ```js const handler = function(evt) { const $li = evt.delegateTarget console.log(`你点击的 li 节点的 id 为 ${$li.id}`) } const callback = function(evt) { const $li = evt.delegateTarget console.log(`你双击的 li 节点的 id 为 ${$li.id}`) } const fn = function(evt) { const $li = evt.delegateTarget console.log(`你鼠标划过的 li 节点的 id 为 ${$li.id}`) } const $emitter = delegate('#list') // 绑定了 $emitter.on('.item', 'click', handler) $emitter.on('.item', 'click', fn) $emitter.on('.item', 'click', callback) // 解除 click 事件绑定的 handler 事件处理器 $emitter.off($list, 'click', callback) // 解除所有 click 事件处理器 $emitter.off($list, 'click') ``` ### click(selector, fn[, data, context, once = false]) #### Description 绑定 click 代理事件，其调用方法和 on() 类似。 #### Since 1.4.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 click 代理事件 $emitter.click('.item', handler) ``` ### dbclick(selector, fn[, data, context, once = false]) #### Description 绑定 dbclick 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 click 代理事件 $emitter.dbclick('.item', handler) ``` ### mouseenter(selector, fn[, data, context, once = false]) #### Description 绑定 mouseenter 代理事件。 #### Since 1.4.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.relatedTarget console.log(`当前事件的 relatedTarget 是：${$target}`) } const $emitter = delegate('#list') // 类选择器 $emitter.mouseenter('.item', handler) ``` ### mouseleave(selector, fn[, data, context, once = false]) #### Description 绑定 mouseleave 代理事件。 #### Since 1.4.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.relatedTarget console.log(`当前事件的 relatedTarget 是：${$target}`) } const $emitter = delegate('#list') // 类选择器 $emitter.mouseleave('.item', handler) ``` ### mousedown(selector, fn[, data, context, once = false]) #### Description 绑定 mousedown 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 mousedown 代理事件 $emitter.mousedown('.item', handler) ``` ### mouseup(selector, fn[, data, context, once = false]) #### Description 绑定 mouseup 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 mouseup 代理事件 $emitter.mouseup('.item', handler) ``` ### mouseover(selector, fn[, data, context, once = false]) #### Description 绑定 mouseover 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 mouseover 代理事件 $emitter.mouseover('.item', handler) ``` ### mousemove(selector, fn[, data, context, once = false]) #### Description 绑定 mousemove 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 mousemove 代理事件 $emitter.mousemove('.item', handler) ``` ### mouseout(selector, fn[, data, context, once = false]) #### Description 绑定 mouseout 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 mouseout 代理事件 $emitter.mouseout('.item', handler) ``` ### drag(selector, fn[, data, context, once = false]) #### Description 绑定 drag 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 drag 代理事件 $emitter.drag('.item', handler) ``` ### dragend(selector, fn[, data, context, once = false]) #### Description 绑定 dragend 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 dragend 代理事件 $emitter.dragend('.item', handler) ``` ### dragenter(selector, fn[, data, context, once = false]) #### Description 绑定 dragenter 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 dragenter 代理事件 $emitter.dragenter('.item', handler) ``` ### dragleave(selector, fn[, data, context, once = false]) #### Description 绑定 dragleave 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 dragleave 代理事件 $emitter.dragleave('.item', handler) ``` ### dragover(selector, fn[, data, context, once = false]) #### Description 绑定 dragover 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 dragover 代理事件 $emitter.dragover('.item', handler) ``` ### dragstart(selector, fn[, data, context, once = false]) #### Description 绑定 dragstart 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 dragstart 代理事件 $emitter.dragstart('.item', handler) ``` ### drop(selector, fn[, data, context, once = false]) #### Description 绑定 drop 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 drop 代理事件 $emitter.drop('.item', handler) ``` ### wheel(selector, fn[, data, context, once = false]) #### Description 绑定 wheel 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 wheel 代理事件 $emitter.wheel('.item', handler) ``` ### contextmenu(selector, fn[, data, context, once = false]) #### Description 绑定 contextmenu 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 contextmenu 代理事件 $emitter.contextmenu('.item', handler) ``` ### focusin(selector, fn[, data, context, once = false]) #### Description focusin() 方法用来绑定 focusin（IE） 或者 focus（其它） 代理事件处理器，调用方法和 on() 一致。并且会根据浏览器自动添加事件类型。具体调用方法请参考 on() 方法。 #### Since 1.4.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $input = evt.delegateTarget console.log(`输入框当前值为：${$input.value}`) } const $emitter = delegate('.options-input') // 类选择器 $emitter.focusin('.options-input__inner', handler) ``` ### focusout(selector, fn[, data, context, once = false]) #### Description focusout() 方法用来绑定 focusout（IE） 或者 blur（其它） 代理事件处理器，调用方法和 on() 一致。并且会根据浏览器自动添加事件类型。具体调用方法请参考 on() 方法。 #### Since 1.4.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $input = evt.delegateTarget console.log(`输入框当前值为：${$input.value}`) } const $emitter = delegate('.options-input') // 类选择器 $emitter.focusout('.options-input__inner', handler) ``` ### change(selector, fn[, data, context, once = false]) #### Description 绑定 change 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#form') // 绑定 change 代理事件 $emitter.change('.input', handler) ``` ### input(selector, fn[, data, context, once = false]) #### Description 绑定 input 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#form') // 绑定 input 代理事件 $emitter.input('.input', handler) ``` ### compositionstart(selector, fn[, data, context, once = false]) #### Description 绑定 compositionstart 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#form') // 绑定 compositionstart 代理事件 $emitter.compositionstart('.input', handler) ``` ### compositionupdate(selector, fn[, data, context, once = false]) #### Description 绑定 compositionupdate 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#form') // 绑定 contextmenu 代理事件 $emitter.compositionupdate('.input', handler) ``` ### compositionend(selector, fn[, data, context, once = false]) #### Description 绑定 compositionend 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#form') // 绑定 compositionend 代理事件 $emitter.compositionend('.input', handler) ``` ### paste(selector, fn[, data, context, once = false]) #### Description 绑定 paste 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#form') // 绑定 paste 代理事件 $emitter.paste('.input', handler) ``` ### copy(selector, fn[, data, context, once = false]) #### Description 绑定 copy 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#list') // 绑定 copy 代理事件 $emitter.copy('.item', handler) ``` ### cut(selector, fn[, data, context, once = false]) #### Description 绑定 cut 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#form') // 绑定 cut 代理事件 $emitter.cut('.textarea', handler) ``` ### keydown(selector, fn[, data, context, once = false]) #### Description 绑定 keydown 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#form') // 绑定 keydown 代理事件 $emitter.keydown('.input', handler) ``` ### keyup(selector, fn[, data, context, once = false]) #### Description 绑定 keyup 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#form') // 绑定 keyup 代理事件 $emitter.keyup('.input', handler) ``` ### error(selector, fn[, data, context, once = false]) #### Description 绑定 error 代理事件。 #### Since 1.7.0 #### Parameters ##### selector Type: `String` Default: `` （必须）通过 selector 选择器判定是否触发指定事件类型的事件处理器。 ##### fn Type: `Function` Default: `` （必须）fn 为事件处理器回调函数。 ##### data Type: `Object` Default: `` （可选）给事件处理器回调函数传递的数据。 ##### context Type: `Object|Boolean` Default: `` （可选）事件处理器回调函数的 this 上下文指向，具体介绍请参考 on() 方法的 context 参数说明； ##### once Type: `Boolean` Default: `false` （可选）once 指定事件处理器回调函数是否仅执行一次。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $target = evt.delegateTarget console.log(`触发事件的 delegateTarget DOM 元素的 id 是：${$target.id}`) } const $emitter = delegate('#albums') // 绑定 error 代理事件 $emitter.error('.image', handler) ``` ### createEvent(type[, detail = null, bubbles = true, cancelable = true]) #### Description 创建自定义事件（CustomerEvent）。 #### Since 1.8.0 #### Parameters ##### type Type: `String` Default: `` （必须）事件类型（名称）。 ##### detail Type: `Object` Default: `null` （可选）传递给自定义事件的数据，默认为 null。 ##### bubbles Type: `Boolean` Default: `true` （可选）是否支持冒泡，默认为 true。 ##### cancelable Type: `Boolean` Default: `true` （可选）是否可以取消，默认为 true。 #### Returns Type: `CustomerEvent` CustomerEvent 实例。 ```html ``` ```js const $nav = document.querySelector('#nav') const $service = document.querySelector('#serivce') const $emitter = delegate($nav) const logEvent = $emitter.createEvent('log', { name: 'Yao', hi() { console.log('hi！！！') } }) const logHandler = function(evt) { console.log('detail', evt.detail) console.log('type', evt.type) } // 或者 $service.dispatchEvent(logEvent) ``` ### trigger(type[, selector]) #### Description trigger() 方法用作手动触（自定义）事件。 trigger() 方法也可以用来手动触发内置的事件，例如 click, mouseenter 等事件，不过通常使用 trigger() 来手动触发用户自定义事件。 另外，选择器 selector 的匹配使用 document.querySelector() 方法，因此仅事件触发一次。 #### Since 1.6.0 #### Parameters ##### type Type: `String` Default: `` （必须）事件类型。 ##### selector Type: `String` Default: `` （可选）通过 selector 选择器判定是否触发指定事件类型的事件处理器。没有选择器，则直接触发 el 元素上的自定义事件 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```html ``` ```js const $list = document.querySelector('#list') const $emitter = delegate($list) const itemHandler = function(evt) { // 其它逻辑 console.log(evt.type + ':' + evt.delegateTarget) } const navHandler = function(evt) { // 其它逻辑 $emitter.stopEvent(evt) console.log(evt.type + ':' + evt.delegateTarget) } // 绑定 alert 自定义事件 $emitter.on('.item', 'alert', itemHandler) $emitter.on('.nav', 'log', navHandler) // 直接给 $list 绑定 alert 事件 $emitter.at('alert', itemHandler) // 触发 $list 下匹配 '.item' 元素手动触发 alert 自定义事件 $emitter.trigger('alert', '.item') // 可以使用伪类选择器，更精确的匹配元素 $emitter.trigger('alert', '.item:last-child') // 触发 $list 下匹配 '.remove' 元素手动触发 alert 自定义事件 $emitter.trigger('alert', '.nav') $emitter.trigger('alert', '.nav:nth-child(1)') // 触发 $list 绑定的 alert 事件 $emitter.trigger('alert') ``` ### purge(type[, recurse]) #### Description 清除 DOM 元素（$el）全部或者指定 type 类型的事件处理器。 #### Parameters ##### type Type: `String` Default: `` （必须）设置 type 时清除特定的事件类型（type）的事件处理器。 ##### recurse Type: `Boolean` Default: `false` （可选）是否递归清理 DOM 元素下所有子节点绑定的事件处理器，默认值：false - 仅清理当前 DOM 元素的事件处理器，true - 同事递归清理 DOM 元素下所有子节点绑定的事件处理器。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $li = evt.delegateTarget const $textarea = document.querySelector('#log-textarea') $textarea.value += `你点击的 li 节点的 id 为 ${$li.id}\r` } const $emitter = delegate('#list') // 绑定事件 $emitter.on('li', 'click', handler) // 获取已绑定的所有类型的事件处理器 $emitter.getListeners() // 获取所有 click 事件处理器 $emitter.getListeners('click') // => [{ // options, // selector, // type, // fn, // data, // context, // capture // }] // 清除绑定的所有 click 事件处理器 $emitter.purge('click') // 清除 $options 元素所有 click 事件处理器 // 同时也清除其子节点绑定的所有类型事件处理器 $emitter.purge('click', true) ``` ### destroy() #### Description 解除 DOM 元素（$el）全部包括子元素的所有事件处理器。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```js const handler = function(evt) { const $li = evt.delegateTarget const $textarea = document.querySelector('#log-textarea') $textarea.value += `你点击的 li 节点的 id 为 ${$li.id}\r` } const $emitter = delegate('#list') // 解除所有绑定事件 $emitter.destroy() // => 点击 li 元素将不会执行 handler 事件处理器 ``` ### preventDefault(evt) #### Description 阻止触发绑定事件 DOM 元素的默认行为。 #### Parameters ##### type Type: `Event` Default: `` （必须）事件对象。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```html ``` ```js const handler = function(evt) { const $link = evt.delegateTarget const $textarea = document.querySelector('#log-textarea') // preventDefault() 方法会阻止点击链接后默认跳转页面的行为发生 $emitter.preventDefault(evt) $textarea.value += `你点击了导航菜单 ${$link.innerHTML},但它不会跳转到${$link.href}页面\r` } const $emitter = delegate('#list') // 点击导航菜单，不会跳转页面 $emitter.on('a.nav', 'click', handler) // => 点击 li 元素将不会执行 handler 事件处理器 ``` ### stopPropagation(evt) #### Description 终止事件在传播过程的捕获或冒泡的事件流。 #### Parameters ##### type Type: `Event` Default: `` （必须）事件对象。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```html ``` ```js const $emitter = delegate('#list') const removeItem = function (evt) { const $removeButton = evt.delegateTarget const id = parseInt($removeButton.getAttribute('data-id'), 10) const $textarea = document.querySelector('#log-textarea') // 阻止事件冒泡，不触发执行 showLog() 回调函数 $emitter.stopPropagation(evt) // ...省略删除的逻辑 $textarea.value += `你删除的 li 节点的 id 为 item-${id}\r` } const showLog = function (evt) { const $li = evt.delegateTarget const $textarea = document.querySelector('#log-textarea') $textarea.value += `你点击的 li 节点的 id 为 ${$li.id}\r` } // 点击删除，只会删除点击行，但不会触发事件冒泡，触发点击 .item 的事件处理函数执行 $emitter.on('.item-remove', 'click', removeItem) $emitter.on('.item', 'click', showLog) ``` ### stopEvent(evt) #### Description 停止事件（阻止默认行为和阻止事件的捕获或冒泡）。 #### Parameters ##### type Type: `Event` Default: `` （必须）事件对象。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```html ``` ```js const $emitter = delegate('#list') const removeItem = function (evt) { const $removeButton = evt.delegateTarget const id = $removeButton.getAttribute('data-id') const $textarea = document.querySelector('#log-textarea') // 阻止事件冒泡，不触发执行 showLog() 回调函数 // 同时阻止点击链接跳转到 /sitemap 页面 $emitter.stopEvent(evt) // ...省略删除的逻辑 $textarea.value += `你删除的 li 节点的 id 为 item-${id}\r` } const showLog = function (evt) { const $li = evt.delegateTarget const $textarea = document.querySelector('#log-textarea') $textarea.value += `你点击的 li 节点的 id 为 ${$li.id}\r` } // 点击删除，只会删除行，不会跳转页面，也不会触发事件冒泡，触发执行 showLog() 回调函数 $emitter.on('.item-remove', 'click', removeItem) $emitter.on('.item', 'click', showLog) ``` ### stopImmediate(evt) #### Description 阻止监听同一事件的其他事件监听器被调用，并且阻止默认行为和事件冒泡。 #### Since 1.8.0 #### Parameters ##### type Type: `Event` Default: `` （必须）事件对象。 #### Returns Type: `Emitter` 返回 Emitter 对象（实例）。 ```html ``` ```js let logged = false let styled = false const $list = document.querySelector('#list') const $support = document.querySelector('#item-support') const $link = document.querySelector('a[data-id="support"]') const $emitter = delegate($support) const logHandler = function(evt) { logged = true console.log(evt.target) } const styleHandler = function(evt) { styled = true $list.classList.add('checked') } const serviceHandler = function(evt) { alert(evt.target) $emitter.stopImmediate(evt) } const removeHandler = function(evt) { const $target = evt.target $target.parentNode.removeChild($target) } $list.addEventListener('click', logHandler) $list.addEventListener('click', styleHandler) $emitter.on('.remove', 'click', serviceHandler) $emitter.on('.remove', 'click', removeHandler) // 不会触发 removeHandler，不会删除一行 // 不会冒泡触发父节点 $list 上绑定的 click 事件 trigger('click', '.remove') // -> logged = false // -> styled = false // document.querySelectorAll('.item').length = 3 ``` ### getListeners([type]) #### Description 获取 DOM 元素（$el）全部或者指定 type 类型的事件处理器相关的（数组）数据。 #### Parameters ##### type Type: `String` Default: `` （可选）设置 type 时获取特定的事件类型（type），默认获取所有类型的事件处理器。 #### Returns Type: `Array` Default: `[]` 返回已绑定的事件类型的数组（去除名称重复的事件）。 ```js const handler = function(evt) { const $li = evt.delegateTarget const $textarea = document.querySelector('#log-textarea') $textarea.value += `你点击的 li 节点的 id 为 ${$li.id}\r` } const $emitter = delegate('#list') // 绑定事件 $emitter.click('li', handler) // 获取已绑定的所有类型的事件处理器 $emitter.getListeners('click') // => [ // { // options, // selector, // type, // fn, // data, // context, // capture // } // ] ``` ### getTypes() #### Description 返回已绑定的事件类型的数组（去除名称重复的事件）。 #### Since 1.5.0 #### Returns Type: `Array` Default: `` 返回已绑定事件类型的数组。 ```js const handler = function(evt) { const $li = evt.delegateTarget const $textarea = document.querySelector('#log-textarea') $textarea.value += `你点击的 li 节点的 id 为 ${$li.id}\r` } const $emitter = delegate('#list') // 绑定事件 $emitter.on('item', 'click', handler) $emitter.click('.remove', handler) $emitter.mouseenter('.item', handler) const types = $emitter.getTypes() console.log(type) // 会去除重复的 click 事件 // => ['click', 'mouseenter'] ``` ### hasEvent([type]) #### Description 判断是否已经（指定类型的）绑定事件。 #### Since 1.4.0 #### Parameters ##### type Type: `String` Default: `` （可选）事件名称: - 指定 type，则判断是否绑定 type 类型事件； - 未指定 type，则判断是否绑定任意类型的事件； #### Returns Type: `Boolean` Default: `` 返回是否绑定（type类型的）事件处理器。 ```js const handler = function(evt) { const $li = evt.delegateTarget const $textarea = document.querySelector('#log-textarea') $textarea.value += `你点击的 li 节点的 id 为 ${$li.id}\r` } const $emitter = delegate('#list') // 绑定事件 $emitter.on('li', 'click', handler) $emitter.hasEvent() // -> true $emitter.hasEvent('focus') // => false ``` ### getPageX(evt) #### Description 获取事件触发时的 pageX 值。 #### Parameters ##### type Type: `Event` Default: `` （必须）事件对象。 #### Returns Type: `Number` 返回事件触发时的 pageX 值。 ```js const $emitter = delegate('#list') const showLog = function (evt) { const pageX = $emitter.getPageX(evt) console.log(`pageX 为：${pageX}`) } $emitter.on('.item', 'click', showLog) ``` ### getPageY(evt) #### Description 获取事件触发时的 pageY 值。 #### Parameters ##### type Type: `Event` Default: `` （必须）事件对象。 #### Returns Type: `Number` 返回事件触发时的 pageY 值。 ```js const $emitter = delegate('#list') const showLog = function (evt) { const pageY = $emitter.getPageY(evt) console.log(`pageY 为：${pageY}`) } $emitter.on('.item', 'click', showLog) ``` ### getPageXY(evt) #### Description 获取事件触发时的 pageX 和 pageY 数组数据。 #### Parameters ##### type Type: `Event` Default: `` （必须）事件对象。 #### Returns Type: `Array` 返回事件触发时的数组数据：[pageX, pageY]。 ```js const $emitter = delegate('#list') const showLog = function (evt) { const pageXY = $emitter.getPageXY(evt) console.log(`pageX 为：${pageXY[0]}`) console.log(`pageY 为：${pageXY[1]}`) } $emitter.on('.item', 'click', showLog) ``` ### getCharCode(evt) #### Description 返回触发事件的 charCode。 #### Parameters ##### type Type: `Event` Default: `` （必须）事件对象。 #### Returns Type: `Number` 返回事件的 charCode。 ```html
``` ```js const $emitter = delegate('#form') const showLog = function (evt) { const charCode = $emitter.getCharCode(evt) console.log(`当前按键的 charCode 为：${charCode}`) } $emitter.on('.input', 'keydown', showLog) ``` ### getRelatedTarget(evt) #### Description 返回触发事件的 relatedTarget DOM 元素。 说明：MouseEvent.relatedTarget 只读属性是鼠标事件的次要目标（如果有）。 相关的鼠标事件有： - mouseenter - mouseleave - mouseover - mouseout - dragenter - dragleave #### Since 1.1.0 #### Parameters ##### type Type: `Event` Default: `` （必须）事件对象。 #### Returns Type: `HTMLElement` Event 对象的 relatedTarget DOM 元素。 ```html ``` ```js const $emitter = delegate('#list') const showLog = function (evt) { const relatedTarget = $emitter.getRelatedTarget(evt) console.log(`当前触发事件的 relatedTarget 为：${relatedTarget}`) } $emitter.on('.remove', 'mouseenter', showLog) ``` ### getTarget(evt) #### Description 返回触发事件的 target DOM 元素。 #### Since 1.1.0 #### Parameters ##### type Type: `Event` Default: `` （必须）事件对象。 #### Returns Type: `HTMLElement` Event 对象的 target DOM 元素。 ```html ``` ```js const $emitter = delegate('#list') const showLog = function (evt) { const target = $emitter.getTarget(evt) console.log(`当前触发事件的 target 为：${target}`) } $emitter.on('.remove', 'click', showLog) ``` ## Example https://yaohaixiao.github.io/delegate.js/#example ## License Licensed under MIT License.