目录

• 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)

总结

• 创建该类型的事件对象(事件类型，参数)
• 事件系统
• 事件分发给事件系统
• 该事件系统事件监听

三、前端框架的自定义事件

vue版本：

react版本：

小程序版本：