JavaScript 手动触发事件和自定义事件

JavaScript手动触发事件和自定义事件

手动触发事件

触发原生事件, 触发自定义事件

JQuery

.on(eventName, callback)   // 原生事件和自定义事件都可以绑定
.trigger(eventName)   // 原生事件和自定义事件都可以触发

Vue

vm.$on(eventName, callback) // 绑定自定义事件
vm.$emit(eventName [, ...args] ) // 只能触发 vm.$on(event, callback) 绑定的事件

原生JavaScript

方法一

HTMLElement.onEventName()

缺点: 只能触发通过 .onEventName 绑定的事件处理函数, 如果是用 .addEventListener 绑定的事件处理函数无法触发

方法二

Name & Arguments Return Description
HTMLElement.blur() void 元素失去焦点
HTMLElement.click() void 触发元素的点击事件
HTMLElement.focus() void 元素获得焦点

缺点:
只能够触发 blur click focus 三个事件
优点:
无论是通过 .onEventName 绑定的事件处理函数还是 通过 .addEventListener 绑定的事件处理函数都可触发

方法三(推荐)

function trigger(el, eventName) {
    const event = new Event(eventName)
    // 如果要传递数据可以挂在 event 上
    el.dispatch(event)
}

优点: 无论任何事件, 通过何种方法绑定都可触发

自定义事件

new Event(eventName [, options])

new Event(eventName [, options])

options 对象属性如下
bubbles, 可选, Boolean类型, 默认值为 false, 表示该事件是否冒泡
cancelable, 可选, Boolean类型, 默认值为 false, 表示该事件能否被取消
composed, 可选, Boolean类型, 默认值为 false, 指示事件是否会在影子DOM根节点之外触发侦听器

new CustomEvent(eventName [, options])

new CustomEvent(eventName [, options])

options 对象属性如下
detail, 可选, 默认值是 null, 可以为任意类型数据，是一个与 event 相关的值 (一般为对象)
bubbles 可选, 默认值是 false, Boolean类型, 表示该事件能否冒泡
cancelable 可选, 默认值是 false, Boolean类型, 表示该事件是否可以取消

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement
https://developer.mozilla.org/zh-CN/docs/Web/API/Event/Event
https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/CustomEvent
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/dispatchEvent