html事件原理,JavaScript之事件原理完整篇-CSDN博客

导航

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.具体例子

按钮1

按钮2

//获取观察者

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)

小程序组件自定义事件

//观察者观察特定事件

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)

总结

观察者首先要继承事件

观察者观察：观察特定的事件

事件分发：主动触发通知

四、总结

事件系统

被观察者：特定的事件

观察者：继承于事件类的某些对象

通知：触发该事件类型，触发的对象为目标对象

通知链：继承链！

从页面角度为：捕获阶段、冒泡阶段

从对象角度理解为：超类通知到子类、子类通知到超类