JavaScript 自定义事件、触发事件

最新推荐文章于 2025-10-27 21:16:19 发布

原创最新推荐文章于 2025-10-27 21:16:19 发布 · 3.6k 阅读

CC 4.0 BY-SA版权

文章标签：

42 篇文章

订阅专栏

本文介绍了JavaScript中自定义事件的实现，包括基本步骤和使用Event构造函数创建初始化事件的方法。详细讲解了如何设置事件监听，以及触发自定义事件的过程。注意，传统的createEvent()和initEvent()已被废弃，推荐使用Event()构造函数。

1. 自定义事件的基本步骤

创建事件.
var event = document.createEvent('Event');
初始化事件【参数：事件类型、事件是否在DOM中冒泡、是否可以用 preventDefault() 方法取消默认事件】
event.initEvent('click', true, false);
设置事件监听.(e.target 即监听事件目标元素)
elem.addEventListener('click', (e) =>{}, false);
触发事件监听
elem.dispatchEvent(event);

createEvent() 和 initEvent() 这两个方法已从Web标准中删除，虽然仍有些浏览器在支持它们。建议使用Event()构造函数提替代它们。

创建并初始化事件（支持冒泡且不能被取消的look事件）。
var ev = new Event("look", {"bubbles":true, "cancelable":false});
设置事件监听.(e.target 即监听事件目标元素)
myDiv.addEventListener('ev', (e) =>{}, false);
触发事件。（派发自定义事件给指定的target）。
myDiv.dispatchEvent(ev);

Event(eventName, eventInit) 的参数1是事件名称。参数2是可选的，有以下3个可选属性。

参数	说明
bubbles	可选，Boolean类型，默认值为 false，表示该事件是否冒泡。
cancelable	可选，Boolean类型，默认值为 false，表示该事件能否被取消。
composed	可选，Boolean类型，默认值为 false，指示事件是否会在影子DOM根节点之外触发侦听器。