导航
目录
html原生事件自定义事件node中的自定义事件前端框架的自定义事件
一、html原生事件
1. 概念
- 观察者模式
- 被观察者：特定事件。触发该事件的对象为：目标对象Target
- 观察者：观察了该特定事件的对象，currentTarget(站在事件流角度来理解)
- 事件Event
// 观察者模式
被观察者：特定事件。触发该事件的对象为：目标对象Target
观察者：观察了该特定事件的对象，currentTarget(站在事件流角度来理解)
观察：让观察者观察特定事件
语法：element.addEventListener(event, function, useCapture);
event:
function:
useCapture:可选。布尔值，指定事件是否在捕获或冒泡阶段执行 √
//useCapture 默认为false，即冒泡，对应小程序catch、bind
//useCapture 为true时，即捕获，对应小程序capture-bind、capture-catch
通知：某些操作触发通知，触发该通知的节点为目标对象
//事件Event
//属性：`
`bubbles`:布尔值，是否会冒泡
`cancelable`:布尔值，是否可以取消默认动作
`target`:目标对象
`currentTarget`:当前对象
`timeStamp`:时间戳(相对于某个时刻)
`type`:事件类型，即注册该事件的名字
`eventPhase`:返回事件传播的当前阶段
//方法
1.event.stopPropagation(); 阻止冒泡
2.event.preventDefault(); 阻止默认动作，只有cancelable为true时才可以阻止默认动作
3.event.stopImmediatePropagation(); 阻止事件链
2.具体例子
//1.获取观察者
let btn=document.querySelector("#btn");
//2.观察：让观察者观察特定类型的事件
btn.addEventListener('click',function(e){
console.log("监听到点击了btn",e)
})
//3.通知：某些操作触发通知，触发该通知的节点为目标对象
//即：用户主动点击或模拟点击btn.click()
二、自定义事件
1、区别1：需要自定义Event
观察：让观察者观察特定类型的事件
语法：element.addEventListener(event, function, useCapture);
//原生事件event采用的是内部原先定义好的了
//而自定义事件是需要自己来定义事件Event
//自定义Event
/*
*1.@myFirstEvent 自定义事件类型
*2.@selfEvent 自定义事件对象
*/
var selfEvent = new CustomEvent('myFirstEvent',{
"detail" : { //可携带额外的数据
age : 18
},
"bubbles" : true,//是否冒泡 回调函数中调用，e.stopPropagation();可以阻止冒泡
"cancelable" : false,//是否可以取消 为true时，event.preventDefault();才可以阻止默认动作行为
});
2、区别2：通知方式不一样
原生通知：某些操作触发通知，触发该通知的节点为目标对象
自定义事件通知：节点对象.dispatchEvent(自定义事件对象)
即节点上的某些操作触发，改为逻辑上面的控制
节点对象.dispatchEvent(自定义事件对象)执行
3.具体例子
<div class="container" id="container">
<div id="btn">
<div id="btn1">按钮1</div>
<div id="btn2">按钮2</div>
</div>
</div>
//获取观察者
let btn=document.querySelector("#btn")
let container=document.getElementById("container");
//添加观察
btn.addEventListener('myFirstEvent',function(e){
console.log("btn监听到了事件",e);
})
container.addEventListener('myFirstEvent',function(e){
console.log("container监听到了事件",e);
})
//模拟触发
setTimeout(()=>{
// 自定义事件
var selfEvent = new CustomEvent('myFirstEvent',{
"detail" : { //可携带额外的数据
age : 18
},
"bubbles" : true,//是否冒泡 回调函数中调用，e.stopPropagation();可以阻止冒泡
"cancelable" : false,//是否可以取消 为true时，event.preventDefault();才可以阻止默认动作行为
});
// 事件分发，触发通知，触发该通知的节点为目标对象
let btn1=document.getElementById("btn1");
btn1.dispatchEvent(e);
},2000)
结果
btn监听到了事件 CustomEvent
container监听到了事件 CustomEvent
4、总结
自定义事件和原生事件区别：
- 观察者观察的是原有的事件还是自定义的事件
- 通知方式是某些操作触发的，还是逻辑上面控制的
自定义事件和框架中的自定义事件区别：自定义事件： //获取观察者 let btn=document.querySelector("#btn"); //添加观察 btn.addEventListener('myFirstEvent',function(e){ console.log("btn监听到了事件",e); },false) //模拟触发 setTimeout(()=>{ // 自定义事件【事件名、事件detail、事件选项】 var selfEvent = new CustomEvent('myFirstEvent',{ "detail" : { //可携带额外的数据 age : 18 }, "bubbles" : true,//是否冒泡 回调函数中调用，e.stopPropagation();可以阻止冒泡 "cancelable" : false,//是否可以取消 为true时，event.preventDefault();才可以阻止默认动作行为 }); // 事件分发，触发通知，触发该通知的节点为目标对象 let btn1=document.getElementById("btn1"); btn1.dispatchEvent(e); },2000) 小程序组件自定义事件 //观察者 观察特定事件 <component-tag-name bindmyevent="onMyEvent" /> const myEventDetail = {} // detail对象，提供给事件监听函数 const myEventOption = {} // 触发事件的选项 this.triggerEvent('myevent', myEventDetail, myEventOption)对比下来，只是书写方式不一样，逻辑是一样的
三、node中的自定义事件
// 事件系统
const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
//事件监听
myEmitter.addListener('event', (res) => {
console.log('触发事件'+res);
});
setTimeout(()=>{
// 事件分发
myEmitter.emit('event','这个是自定义事件details');//事件对象，较传统要简单明了
},2000)
总结
- 观察者首先要继承事件
- 观察者观察：观察特定的事件
- 事件分发：主动触发通知
四、总结
事件系统
- 被观察者：特定的事件
- 观察者：继承于事件类的某些对象
- 通知：触发该事件类型，触发的对象为目标对象
通知链：继承链！
从页面角度为：捕获阶段、冒泡阶段
从对象角度理解为：超类通知到子类、子类通知到超类- 以上分别从html、框架、nodeJs来分析事件系统。其实总结如上
