【JS|第28期】new Event()：前端事件处理的利器
日期：2025年1月24日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01365 = 37.7834；0.99365 = 0.0255
1.02365 = 1377.4083；0.98365 = 0.0006
文章目录
- 一、前言
- 二、new Event 的前世今生
- （1）早期实现方式
- （2）现代实现方式
- 三、new Event 的基本用法
- 四、new Event 与 CustomEvent 的区别
- 五、实际案例：模拟输入 input 值
- （1）普通的 input 场景
- （2）框架的 input 场景
- （3）框架的 div+ input 场景
- 六、结语
一、前言
在前端开发中，事件机制是实现用户交互和动态效果的核心。Event 对象是浏览器中用于处理事件的核心接口，而 new Event 是创建自定义事件的一种方式。本文将带你深入了解 new Event 的前世今生、用法、参数含义及参数值，并结合实际案例进行详细讲解。
二、new Event 的前世今生
在早期的 Web 开发中，事件主要局限于浏览器原生提供的一些简单交互，如点击、鼠标移动等。随着 Web 应用的复杂性不断增加，开发者对于自定义事件的需求日益迫切。new Event() 正是在这样的背景下诞生，它是 W3C DOM 规范的重要组成部分。随着 HTML5 等规范的不断演进，new Event() 也在持续完善，兼容性和功能都得到了显著提升，如今已成为前端开发中不可或缺的工具。
（1）早期实现方式
在 DOM Level 2 规范中，浏览器引入了 document.createEvent 方法来创建事件对象，并通过 initEvent 方法初始化事件。这种方式虽然可以实现自定义事件，但语法较为繁琐。
var event = document.createEvent('Event');
event.initEvent('myEvent', true, true);
element.dispatchEvent(event);
这种方式虽然在过去被广泛使用，但已经逐渐被现代浏览器所淘汰。
（2）现代实现方式
随着 DOM Level 4 规范的推出，new Event 构造函数被引入，简化了自定义事件的创建过程。现在，我们可以通过 new Event 直接创建一个事件对象，并使用 dispatchEvent 方法触发事件。
// var event = new Event('myEvent', { bubbles: true, cancelable: true });
let event = new Event('myEvent', { bubbles: true, cancelable: true });
element.dispatchEvent(event);
这种方式不仅简化了代码，还提高了可读性和可维护性，更符合面向对象的设计理念。
三、new Event 的基本用法
new Event 用于创建一个新的事件对象，其基本语法如下：
let event = new Event(type, options);
-
type: 事件类型名称（字符串），例如'click'、'blur、'myEvent'等。更多事件可看我的另一篇文章《【JS|第29期】JavaScript中的事件类型》； -
options: 可选参数，一个对象，用于指定事件的属性：键名 说明 truefalsebubbles布尔值，指示事件是否冒泡。默认值为 false。事件会向上冒泡到父元素。 事件不会冒泡。 cancelable布尔值，指示事件是否可以被取消。默认值为 false。事件可以被取消，例如通过 event.preventDefault()。事件不能被取消。 composed布尔值，指示事件是否会穿过影子 DOM（Shadow DOM）。默认值为false。事件会穿过影子 DOM。事件不会穿过影子 DOM。
示例：
// 创建一个名为 'myEvent' 的事件
let event = new Event('myEvent', { bubbles: true, cancelable: true });
// 触发事件
document.dispatchEvent(event);
四、new Event 与 CustomEvent 的区别
虽然 new Event 可以满足大部分自定义事件的需求，但在某些情况下，CustomEvent 提供了更强大的功能。CustomEvent 允许开发者为事件添加自定义数据。
使用 CustomEvent 的示例：
// 创建一个名为 'myEvent' 的自定义事件，并携带数据
var event = new CustomEvent('myEvent', { detail: { message: 'Hello Commas' }, bubbles: true, cancelable: true });
// 触发事件
document.dispatchEvent(event);
// 监听事件
document.addEventListener('myEvent', function(e) {
console.log(e.detail.message); // 输出: Hello, Commas
});
如果需要为事件传递额外的数据，建议使用 CustomEvent；如果只是简单地触发一个事件，new Event 即可满足需求。
五、实际案例：模拟输入 input 值
（1）普通的 input 场景
一般情况，我们只要改变 value ，就可以改变 input 的值，如下：
// 获取 id 为 star_num 的input元素
let eInput = document.querySelector('#star_num');
eInput.value = 100;
（2）框架的 input 场景
当我们不以为然，说这不是小儿科的事情的时候，我们或许会发现一些使用 前端框架 的网页中的 input 却只是 “面改心不改”，还是原来的值。这是因为我们给 eInput.value 赋值，并不会触发 input 的 change 事件，从而框架并不知道 eInput.value 发生了改变，这才导致并非我们预期的结果。
那么接下来，我们就主动触发一下 change 事件：
// 创建事件
let changeEvent = new Event("change", { bubbles: true });
// 触发事件
eInput.dispatchEvent(changeEvent);
既然 eInput.value 真的改变了，那么我们就做一个封装函数：
changeInputValue(eInput, newText) {
// 旧值
let lastValue = eInput.value;
// 新值
eInput.value = newText;
// 创建事件
let changeEvent = new Event("change", { bubbles: true });
// 标识该事件通过编程方式模拟的
event.simulated = true;
// 某些框架（如：React）提供的内部属性,并非标准的 DOM 属性，用于跟踪和管理输入元素的值。
let tracker = eInput._valueTracker;
if (tracker) {
// 通过调用这个方法，代码将输入元素的值恢复到旧值，确保框架内部的跟踪机制与 DOM 的实际值保持一致。
// 这在模拟事件时尤为重要，因为框架可能需要知道输入值的变化是由用户操作还是由代码模拟的。
tracker.setValue(lastValue);
}
// 触发事件
eInput.dispatchEvent(changeEvent);
},
// 调用
let eInput = document.querySelector('#star_num');
changeInputValue(eInput,100);
（3）框架的 div+ input 场景
本以为这就完事了，没想到居然还有 div + input 组合的场景。整个输入过程中 input 不过是昙花一现，可分为三个阶段：
- 输入前：当用户点击
div的时候，会自动创建一个input作为div的子元素，并聚焦input； - 输入中：用户在
input中输入新值； - 输入后：
input失焦后，input.value数据会回填到div.innerText，并且销毁input；
我们了解原理后，只需要照着步骤实现就好啦
// （1）输入前
let eInputParent = document.querySelector('#star_num_parent');
eInputParent.click();
// 为了给创建input元素预留时间，等待0.5秒后再往下执行，
await waitForSeconds(0.5);
// （2）输入中
let eInput= eInputParent.querySelector('input');
changeInputValue(eInput,100);
// （3）输入后
let blurEvent = new Event("blur",{ bubbles: true });
inputDom.dispatchEvent(blurEvent);
其中 waitForSeconds() 是自定义函数，如下：
async function waitForSeconds(seconds) {
return new Promise((resolve) => {
setTimeout(() => {
resolve("等待时间已过");
}, seconds * 1000); // 毫秒为单位
});
},
六、结语
new Event() 作为前端事件处理的强大工具，为开发者提供了创建和管理自定义事件的简便方法。通过了解其参数及常用值，我们可以更加灵活地运用它，构建出更加丰富和交互性强的用户界面。同时，对于需要传递数据的场景，CustomEvent 提供了更强大的功能。
参考文章：
- 《MDN Web docs》- Event()
- 《MDN Web docs》- CustomEvent：CustomEvent() 构造函数
- 《DOM Level 2 Events Specification》
版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/145321660