这是我参与「第四届青训营」笔记创作活动的第4天。
创建自定义事件的方法
document.createEvent()
createEvent 使用的许多方法都被废弃了，这里不再赘述，主要介绍下面两种方法。
new Event()
-
语法
const myEvent = new Event(eventName, eventOptions); -
参数
eventName : String类型，必选项，表示事件的名称 eventOptions : Object类型，事件的可选配置项
字段 说明 类型 默认值 bubbles 事件是否冒泡 Boolean false cancelable 事件是否能被取消 Boolean false composed 事件是否会在影子 DOM 根节点之外触发侦听器 Boolean false -
代码示例：
<body>
<div class="test"></div>
<script>
//创建自定义事件
const myEvent = new Event("myEvent", {
detail: {
msg: '信息内容'
},
bubbles: true
})
//监听自定义事件
document.body.addEventListener("myEvent", function(e){
console.log('我触发的是自定义事件', 'body');
});
let testDOM = document.querySelector('.test');
testDOM.addEventListener("myEvent", function(){
console.log('我触发的是自定义事件', 'testDOM');
});
//派发自定义事件
testDOM.dispatchEvent(myEvent);
</script>
</body>
输出结果：
new CustomEvent()
-
语法
const myEvent = new CustomEvent(eventName, eventOptions); -
参数
eventName : String类型，必选项，表示事件的名称
eventOptions : Object类型，事件的可选配置项
字段 说明 类型 默认值 detail 事件中需要被传递的数据 Any null bubbles 事件是否冒泡 Boolean false cancelable 事件是否能被取消 Boolean false -
代码示例：
<body>
<div class="test"></div>
<script>
//创建自定义事件
const myEvent = new CustomEvent("myEvent", {
detail: {
msg: '传递的信息内容'
},
bubbles: true,
})
//监听自定义事件
document.body.addEventListener("myEvent", function(e){
console.log(e.detail.msg, 'body');
});
let testDOM = document.querySelector('.test');
testDOM.addEventListener("myEvent", function(e){
console.log(e.detail.msg, 'testDOM');
});
//派发自定义事件
testDOM.dispatchEvent(myEvent);
</script>
</body>
输出结果：
通过上面两个例子可以看出，Event和CustomEvent最大的区别在于，CustomEvent可以传递数据。
派发自定义事件
- 语法：target.dispatchEvent(event)
- 定义：向一个指定的事件目标派发一个事件
- 参数
event是要被派发的事件对象。target被用来初始化事件和决定将会触发目标。
