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

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

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

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

  • Event
  • EventTarget
  • EventListener

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

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

在上面的例子当中：

  • elem 代表EventTarget，你可以为他添加事件addEventListener，移除事件removeEventListener，或者派发事件dispatchEvent。大部分情况下是HTML节点，但也可以是其他的对象比如XHR

  • event 自然就是指我们创建的Event。他不仅仅是指定了事件的名字。还可以添加其他信息：

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

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读