前端自定义事件的触发与监听
一、基本概念
实现前端自定义事件的触发与监听主要有四个东西,他们分别是Event、CustomEvent、addEventLister、dispatchEvent
1.Event
event = new Event(eventNameStr, options);
eventNameStr
:事件名称字符串
options
:
bubbles
, 可选, Boolean类型, 默认值为 false, 表示该事件是否冒泡cancelable
, 可选, Boolean类型, 默认值为 false, 表示该事件能否被取消composed
, 可选, Boolean类型, 默认值为 false, 指示事件是否会在影子DOM根节点之外触发侦听器
2.CustomEvent
CustomEvent是继承了Event,但是新增在options中新增了一个detail字段,可以在其中设置一些自定义数据
customEvent = new CustomEvent(eventNameStr, options);
eventNameStr
:事件名称字符串
options
:
bubbles
, 可选, Boolean类型, 默认值为 false, 表示该事件是否冒泡cancelable
, 可选, Boolean类型, 默认值为 false, 表示该事件能否被取消composed
, 可选, Boolean类型, 默认值为 false, 指示事件是否会在影子detail
, 可选的默认值是 null 的任意类型数据,是一个与 event 相关可自定义的值
3.addEventLister
这个我们应该比较熟悉,经常在监听dom的一些事件中使用
dom.addEventListener(eventNameStr, callback)
window.addEventListener(eventNameStr, callback)
eventNameStr
:监听的事件名称字符串
callback
:监听到事件触发的回调函数
4.addEventLister
这个我们应该比较熟悉,经常在监听dom的一些事件中使用
dom.dispatchEvent(event)
window.dispatchEvent(event)
event
:触发的事件对象(由1或者2得到)
二、代码实现
1.触发原生事件
(1)不传递参数
<div id="box" onclick="divClick(event)"></div>
<button type="button" onclick="clickTestEvent()">点我触发Event</button>
let divBox = document.getElementById('box')
function divClick(e) {
console.log('divClick');
console.log(e);
}
function clickTestEvent() {
const event = new Event('click') // 初始化事件
divBox.dispatchEvent(event) // 触发事件
}
点击按钮之后即可触发div的click事件
(2)传递参数
传递参数推荐使用CustomEvent,因为它提供了options.detail参数供我们自定义
<div id="box" onclick="divClick(event)"></div>
<button type="button" onclick="clickTestCustomEvent()">点我触发CustomEvent</button>
let divBox = document.getElementById('box')
function divClick(e) {
console.log('divClick');
console.log(e);
}
function clickTestCustomEvent() {
const customerEvent = new CustomEvent('click', {detail: {name: 222}}) // 初始化CustomEvent事件,并在detail中设置自定义参数
divBox.dispatchEvent(customerEvent)
}
点击之后可以在detail字段中去除自定义的数据
其实使用Event也可以实现参数传递
<div id="box" onclick="divClick(event)"></div>
<button type="button" onclick="clickTestEvent()">点我触发Event</button>
let divBox = document.getElementById('box')
function divClick(e) {
console.log('divClick');
console.log(e);
}
function clickTestEvent() {
const event = new Event('click') // 初始化事件
event.data = { // 给event添加自定义属性来传递参数,但自定义属性时不要把原生属性覆盖
age: 111
}
divBox.dispatchEvent(event) // 触发事件
}
2.触发自定义事件
我们可以用这种方式触发一些自定义事件
<div id="box"></div>
<button type="button" onclick="clickTestEvent()">点我触发Event</button>
let divBox = document.getElementById('box')
function clickTestEvent() {
const event = new Event('eventTest') // 初始化自定义事件 'eventTest'
divBox.dispatchEvent(event)
}
function eventTest(e) {
// 监听自定义事件 'eventTest' 的回调
console.log(e);
}
divBox.addEventListener('eventTest', eventTest) // 监听自定义事件 'eventTest'
点击即可触发自定义事件 ‘eventTest’。传参等操作与触发原生事件相同。