Event,EventTarget,EventEmitter

Event,EventTarget,EventEmitter

EventTarget

这里说明浏览器中的 EventTarget

DOM 节点的事件操作(监听和触发),都定义在EventTarget接口。所有节点对象都部署了(实现)这个接口,其他一些需要事件通信的浏览器内置对象(比如,XMLHttpRequestAudioNodeAudioContext)也部署了(实现)这个接口。

事件通常由外部源触发,同样也会以编程方式触发,例如执行一个 element 的一个 HTMLElement.click( ) 方法,或通过定义事件,然后使用 EventTarget.dispatchEvent( ) 将其派发到一个指定的目标。

该接口主要提供三个实例方法:

  • addEventListener():绑定事件的监听函数
  • removeEventListener():移除事件的监听函数
  • dispatchEvent():触发事件

Event

事件发生以后,会产生一个事件对象,作为参数传给监听函数。浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype对象。

Event对象本身就是一个构造函数,可以用来生成新的实例。

EventEmitter

Node.jsevents模块中,EventEmitter是一个非常重要的类,很多模块都继承了它,比如StreamHTTPNet等。

EventEmitter的使用非常简单,它提供了ononceemitremoveListener等方法,用于注册事件监听器、触发事件、移除事件监听器等。

Node中的 EventTarget和Event

Node.js 中的 EventTargetEvent 对象是对 EventTarget Web API 的特定实现。

浏览器的EventTarget和node中EventEmitter 区别

Node.js 和浏览器都是基于事件驱动的平台,而 EventEmitter 和 EventTarget 分别是它们的核心事件处理机制。

区别

EventEmitterEventTarget都是用来实现事件的,但是它们之间还是有一些区别的。

首先,EventTarget会有事件冒泡,而EventEmitter没有事件冒泡。
因为在nodejs中是不存在层级关系的,所有的模块都是平级的,所以EventEmitter也就没有事件冒泡。
而在浏览器中,DOM元素天然就有层级关系,事件冒泡也就是自然而然的事情了,如果没有事件冒泡,那么事件的传递就会变得非常麻烦。

其次就是EventEmitterEventTarget的实现方式不同;

EventEmitter是一个发布订阅模式的实现,而EventTarget是一个观察者模式的实现。

这两种模式的区别在于,发布订阅模式中,发布者和订阅者是没有关系的,发布者只负责发布事件,订阅者只负责订阅事件,发布者和订阅者之间没有任何关系。

而观察者模式中,观察者和被观察者是有关系的,观察者会观察被观察者的变化,当被观察者发生变化时,观察者会收到通知。

这也是为什么EventEmitter中事件触发是可以直接通过字符串,而EventTarget中事件触发需要通过事件对象的原因。

同时也是因为这个原因他们的API也有所不同,EventEmitter中会有once这种只执行一次就移除的方法,而EventTarget中没有这种方法。

nodejsevents模块中,其实也有EventTarget的实现,但是它并不是继承EventEmitter的,而是改写了EventEmitter的实现,使其符合EventTarget的规范。

他们的区别同样也是没有事件冒泡,同时运行环境不同,服务的对象也不同。

总结

EventEmitterEventTarget都是用来实现事件的,但是它们之间还是有一些区别的。

最大的区别就是一个是node环境,一个是浏览器环境,为了服务不同的环境,它们的实现方式也不同。

EventEmitter是一个发布订阅模式的实现,而EventTarget是一个观察者模式的实现。

EventEmitter中事件触发是可以直接通过字符串,而EventTarget中事件触发需要通过事件对象。

参考:
Node.js中的EventEmitter与浏览器中的EventTarget:深度探索事件处理的异同
前端事件Event以及EventTarget
浏览器的 EventTarget 接口,Event 对象以及原生事件
EventTarget 接口
Event 对象
深入探讨:Node.js中的EventEmitter与浏览器
Nodejs-Events模块

posted @ 2024-06-28 01:00  CD、小月  阅读(27)  评论(0编辑  收藏  举报