JavaScript中的事件Event / CustomEvent / EventListener / EventTarget的相关概念。

朴灿烈づ我的快乐病毒、 2022-10-26 03:59 157阅读 0赞

在前端开发中，我们经常会给元素绑定事件。但恐怕对javascript本身事件机制没有太深的关注。

在浏览器事件相关的API中，主要有三个接口：

*  Event
 *  EventTarget
 *  EventListener

以上的三个接口就足以完成一个事件的创建，监听，以及派发。

// 创建事件
    const event = new Event('foo');
    
    // 事件监听
    const eventListener= function (e) { console.log(e.detail)};
    elem.addEventListener('foo', eventListener, false);
    
    // 派发事件
    elem.dispatchEvent(event);

在上面的例子当中：

*  elem 代表EventTarget，你可以为他添加事件`addEventListener`，移除事件`removeEventListener`，或者派发事件`dispatchEvent`。大部分情况下是HTML节点，但也可以是其他的对象比如XHR
 *  event 自然就是指我们创建的Event。他不仅仅是指定了事件的名字。还可以添加其他信息：

const event = new CustomEvent('build', {  detail: '定制信息' });

上边的`CustomEvent`是Event的子接口。事实上event有很多子接口：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]

*  最后，变量eventListener 指实现了EventListener的对象，能够处理其对应的事件。一般而言就是普通函数。

总结一下，一个事件的生命周期有一个主体（EventTarget），一般而言就是HTML节点，可以使用addEventListener为该主体绑定事件（Event）与处理函数（EventListener）。最终实现事件的绑定与派发。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221024/da0a8482a6a345a1bd8a5d9f34ff494c.png