<script src="https://cdn.jsdelivr.net/gh/yaohaixiao/delegate.js/delegate.min.js"></script>

Example

事件代理最适用的场景就是下面示例中,需要动态创建 DOM 元素,并且还会频繁移除动态创建的 DOM 元素的应用场景。在该场景下,通常不方便,也不会为动态创建的 DOM 节点一一绑定事件处理器。因为在移除 DOM 节点时,如果没有(及时)销毁 DOM 节点绑定的事件处理函数,就会导致事件处理器一直占用内存资源无法释放,从而导致浏览器的内存溢出。

通过事件代理就可以很好的解决前面提到的问题,事件代理是将事件侦听器添加到一个父级元素上,这样就只用添加一次事件侦听器,可以避免向 (父级元素内)很多特定的 DOM 节点添加多个事件侦听器,减少了内存消耗,从而优化程序性能。而这个添加在父元素上的事件侦听器通过事件冒泡的事件流机制以分析查找子元素(选择器)的匹配项。

解除 .case__item 绑定解除 .case__remove 绑定
    添加行
    <ul id="list" class="case__list"></ul>
    <script src="lib/delegate.min.js"></script>
    <script>
    const $list = document.querySelector('#list')
    const $emitter = delegate($list)
    
    // 通过 on() 方法绑定代理事件
    $emitter.on('.case__item', 'click', logClick)
    // 通过 mouseenter() 方法绑定 mouseenter 代理事件
    $emitter.mouseenter('.case__item', logMouseEnter)
    // 通过 click() 方法绑定 click 代理事件
    $emitter.click('.remove', remove)
    
    // 通过 off() 方法解除已绑定的代理事件
    $emitter.off('click', log)
    $emitter.off('click', remove)
    // 也可以通过 purge() 方法,解除所有 mouseenter 类型事件绑定
    $emitter.purge('mouseenter')
    
    // 解除所有事件绑定
    $emitter.destroy()
    
    // 绑定 log 自定义事件
    $emitter.on('.case__item','log', logTrigger)
    // 使用 trigger() 方法手动触发自定义的事件
    $emitter.trigger('log', '.item:nth-child(2)')
    
    $provider.focusin('.case__textarea', typeHandler)
    $provider.keyup('.case__textarea', keyboardHandler)
    </script>

    Options

    el

    Description

    Type:
    HTMLElement | String
    Default:
    ''

    必须,要添加事件代理的 DOM 元素或者 DOM 元素的选择器。

    Usage

    使用 DOM 节点选择器
    delegate('#list')
    使用 DOM 节点
    const $list = document.getElementById('list')
    
    delegate($list)

    Properties

    $el

    Description

    Type:
    HTMLElement
    Default:
    ''

    添加事件代理的 DOM 元素。

    Usage

    const $emitter = delegate('#list')
    
    $emitter.$el
    // => 获取到 list 列表 DOM 元素

    Methods

    on(selector, type, fn[, data, context, once = false])

    Description

    on() 方法用来绑定事件代理处理器。

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    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

    (必须)type 用以设置触发的事件类型。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    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

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    const handler = function(evt, data) {
      console.log('data', data)
      // => { user: 'Robert' }
    }
    
    // 使用 DOM 节点选择器
    const $emitter = delegate('#list')
    
    // 传递数据并指定 this
    $emitter.on('li', 'click', handler, { user: 'Robert' }, this)
    
    // 仅指定 this
    $emitter.on('li', 'click', handler, this, true)
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    once(selector, type, fn[, data, context])

    Description

    once() 方法用来绑定事件代理处理器,仅触发一次。

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    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

    (必须)type 用以设置触发的事件类型。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    off(type[, fn])

    Description

    off() 方法用来接触绑定的事件代理处理器。

    Parameters

    type
    Type:
    String

    (必须)type 指定需要接触绑定的事件类型,不指定则解绑 $el 上绑定的所有事件处理器。

    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

    (可选)fn 指定需要接触绑定的事件处理器回调函数,如果不指定则接触 $el 绑定的所有指定 type 的事件处理器。

    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')

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    click(selector, fn[, data, context, once = false])

    Description

    绑定 click 代理事件,其调用方法和 on() 类似。

    Since:
    1.4.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.mousedown('.item', handler)

    mouseup(selector, fn[, data, context, once = false])

    Description

    绑定 mouseup 代理事件。

    Since:
    1.7.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.mouseup('.item', handler)

    mouseover(selector, fn[, data, context, once = false])

    Description

    绑定 mouseover 代理事件。

    Since:
    1.7.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.mouseover('.item', handler)

    mouseover(selector, fn[, data, context, once = false])

    Description

    绑定 mouseover 代理事件。

    Since:
    1.7.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.mouseover('.item', handler)

    mouseout(selector, fn[, data, context, once = false])

    Description

    绑定 mouseout 代理事件。

    Since:
    1.7.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.mouseout('.item', handler)

    drag(selector, fn[, data, context, once = false])

    Description

    绑定 drag 代理事件。

    Since:
    1.7.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.drag('.item', handler)

    dragend(selector, fn[, data, context, once = false])

    Description

    绑定 dragend 代理事件。

    Since:
    1.7.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.dragend('.item', handler)

    dragenter(selector, fn[, data, context, once = false])

    Description

    绑定 dragenter 代理事件。

    Since:
    1.7.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.dragenter('.item', handler)

    dragleave(selector, fn[, data, context, once = false])

    Description

    绑定 dragleave 代理事件。

    Since:
    1.7.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.dragleave('.item', handler)

    dragover(selector, fn[, data, context, once = false])

    Description

    绑定 dragover 代理事件。

    Since:
    1.7.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.dragover('.item', handler)

    dragstart(selector, fn[, data, context, once = false])

    Description

    绑定 dragstart 代理事件。

    Since:
    1.7.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.dragstart('.item', handler)

    drop(selector, fn[, data, context, once = false])

    Description

    绑定 drop 代理事件。

    Since:
    1.4.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.drop('.item', handler)

    wheel(selector, fn[, data, context, once = false])

    Description

    绑定 wheel 代理事件。

    Since:
    1.7.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.wheel('.item', handler)

    contextmenu(selector, fn[, data, context, once = false])

    Description

    绑定 contextmenu 代理事件。

    Since:
    1.7.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    const handler = function(evt) {
      const $target = evt.relatedTarget
      console.log(`当前事件的 relatedTarget 是:${$target}`)
    }
    
    const $emitter = delegate('#list')
    
    // 类选择器
    $emitter.contextmenu('.item', handler)

    focusin(selector, fn[, data, context, once = false])

    Description

    focusin() 方法用来绑定 focusin(IE) 或者 focus(其它) 代理事件处理器。

    Since:
    1.4.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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(其它) 代理事件处理器。

    Since:
    1.4.0

    Parameters

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    fn
    Type:
    Function

    (必须)fn 为事件处理器回调函数。

    data
    Type:
    Object

    (可选)给事件处理器回调函数传递的数据。

    context
    Type:
    Object | Boolean

    (可选)事件处理器回调函数的 this 上下文指向:

    • 当设置为 true 时,则事件处理器回调函数的 this 上下文指向为 data 对象;
    • 如未指定 context,则事件处理器回调函数的 this 上下文指向为 Emitter 对象;
    once
    Type:
    Boolean
    Default:
    false

    (可选)once 指定事件处理器回调函数是否仅执行一次。

    Returns

    Type:
    Emitter 对象。

    Emitter 对象。

    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

    (必须)事件类型(名称)。

    detail
    Type:
    Object
    Default:
    null

    (可选)传递给自定义事件的数据,默认为 null。

    bubbles
    Type:
    Boolean
    Default:
    true

    (可选)是否支持冒泡,默认为 true。

    cancelable
    Type:
    Boolean
    Default:
    true

    (可选)是否可以取消,默认为 true。

    Returns

    Type:
    CustomerEvent。

    CustomerEvent 实例。

    <div id="nav" class="nav">
      <a id="service" class="anchor" href="https://www.yaohaixiao.com/serivce">Service</a>
      <a id="help" class="anchor" href="https://www.yaohaixiao.com/help">Help</a>
    </div>
    
    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

    (必须)事件类型(名称)。

    selector
    Type:
    String

    (必须)通过 selector 选择器判定是否触发指定事件类型的事件处理器。

    Returns

    Type:
    Emitter。

    返回 Emitter 对象(实例)。

    <ul id="list" class="list">
      <li class="item">
        <a href="/home" class="nav">Home</a>
      </li>
      <li class="item">
        <a href="/support" class="nav">Support</a>
      </li>
      <li class="item">
        <a href="/faqs" class="nav">FAQs</a>
      </li>
    </ul>
    
    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 下匹配 '.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)')

    purge(type[, recurse])

    Description

    清除 DOM 元素($el)全部或者指定 type 类型的事件处理器。

    Parameters

    type
    Type:
    String

    (必须)事件类型(名称)。

    recurse
    Type:
    Boolean
    Default:
    false

    (可选)是否递归清理 DOM 元素下所有子节点绑定的事件处理器,默认值:false - 仅清理当前 DOM 元素的事件处理器,true - 同事递归清理 DOM 元素下所有子节点绑定的事件处理器。

    Returns

    Type:
    Emitter。

    返回 Emitter 对象(实例)。

    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 对象(实例)。

    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

    evt
    Type:
    Event

    (必须)事件对象。

    Returns

    Type:
    Emitter。

    返回 Emitter 对象(实例)。

    <ul id="list" class="list">
      <li class="item">
        <a href="/home" class="nav">Home</a>
      </li>
      <li class="item">
        <a href="/support" class="nav">Support</a>
      </li>
      <li class="item">
        <a href="/faqs" class="nav">FAQs</a>
      </li>
    </ul>
    
    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

    evt
    Type:
    Event

    (必须)事件对象。

    Returns

    Type:
    Emitter。

    返回 Emitter 对象(实例)。

    <ul id="list" class="list">
      <li class="item" id="item-home">
        <span>Home</span>
        <span class="item-remove" data-id="home">删除</a>
      </li>
      <li class="item" id="item-support">
        <span>Support</span>
        <span class="item-remove" data-id="support">删除</a>
      </li>
      <li class="item" id="item-faqs">
        <span>FAQs</span>
        <span class="item-remove" data-id="faqs">删除</a>
      </li>
    </ul>
    
    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

    evt
    Type:
    Event

    (必须)事件对象。

    Returns

    Type:
    Emitter。

    返回 Emitter 对象(实例)。

    <ul id="list" class="list">
      <li class="item" id="item-home">
        <span>Home</span>
        <span class="item-remove" data-id="home">删除</a>
      </li>
      <li class="item" id="item-support">
        <span>Support</span>
        <span class="item-remove" data-id="support">删除</a>
      </li>
      <li class="item" id="item-faqs">
        <span>FAQs</span>
        <span class="item-remove" data-id="faqs">删除</a>
      </li>
    </ul>
    
    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

    evt
    Type:
    Event

    (必须)事件对象。

    Returns

    Type:
    Emitter。

    返回 Emitter 对象(实例)。

    <ul id="list" class="list">
      <li class="item" id="item-home">
        <span>Home</span>
        <span class="item-remove" data-id="home">删除</a>
      </li>
      <li class="item" id="item-support">
        <span>Support</span>
        <span class="item-remove" data-id="support">删除</a>
      </li>
      <li class="item" id="item-faqs">
        <span>FAQs</span>
        <span class="item-remove" data-id="faqs">删除</a>
      </li>
    </ul>
    
    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

    (可选)设置 type 时获取特定的事件类型(type),默认获取所有类型的事件处理器。

    Returns

    Type:
    Array。

    返回已绑定的事件类型的数组(去除名称重复的事件)。

    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。

    返回已绑定事件类型的数组。

    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

    (可选)事件名称:

    • 指定 type,则判断是否绑定 type 类型事件;
    • 未指定 type,则判断是否绑定任意类型的事件;

    Returns

    Type:
    Boolean。

    返回是否绑定(type类型的)事件处理器。

    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

    evt
    Type:
    Event

    (必须)事件对象。

    Returns

    Type:
    Number。

    返回事件触发时的 pageX 值。

    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

    evt
    Type:
    Event

    (必须)事件对象。

    Returns

    Type:
    Number。

    返回事件触发时的 pageY 值。

    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

    evt
    Type:
    Event

    (必须)事件对象。

    Returns

    Type:
    Array。

    返回事件触发时的数组数据:[pageX, pageY]。

    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

    evt
    Type:
    Event

    (必须)事件对象。

    Returns

    Type:
    Number。

    返回事件的 charCode。

    <form id="form" name="form" class="form">
      <div class="field">
        <label for="user">用户名:</label>
        <input id="user" name="user" type="text" class="input" />
      </div>
      <div class="field">
        <label for="password">密 码:</label>
        <input id="password" name="password" type="password" class="input" />
      </div>
    </form>
    
    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

    evt
    Type:
    Event

    (必须)事件对象。

    Returns

    Type:
    HTMLElement。

    Event 对象的 relatedTarget DOM 元素。

    <ul id="list" class="list">
      <li class="item" id="item-home">
        <span>Home</span>
        <a href="/sitemap#home" class="remove" data-id="home">删除</a>
      </li>
      <li class="item" id="item-support">
        <span>Support</span>
        <a href="/sitemap#support" class="remove" data-id="support">删除</a>
      </li>
      <li class="item" id="item-faqs">
        <span>FAQs</span>
        <a href="/sitemap#support" class="remove" data-id="faqs">删除</a>
      </li>
    </ul>
    
    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

    evt
    Type:
    Event

    (必须)事件对象。

    Returns

    Type:
    HTMLElement。

    Event 对象的 target DOM 元素。

    <ul id="list" class="list">
      <li class="item" id="item-home">
        <span>Home</span>
        <a href="/sitemap#home" class="remove" data-id="home">删除</a>
      </li>
      <li class="item" id="item-support">
        <span>Support</span>
        <a href="/sitemap#support" class="remove" data-id="support">删除</a>
      </li>
      <li class="item" id="item-faqs">
        <span>FAQs</span>
        <a href="/sitemap#support" class="remove" data-id="faqs">删除</a>
      </li>
    </ul>
    
    const $emitter = delegate('#list')
    const showLog = function (evt) {
      const target = $emitter.getTarget(evt)
    
      console.log(`当前触发事件的 target 为:${target}`)
    }
    
    $emitter.on('.remove', 'click', showLog)