JS创建自定义事件及触发

最新推荐文章于 2025-09-08 09:12:59 发布

原创最新推荐文章于 2025-09-08 09:12:59 发布 · 815 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript #浏览器 #控制台

Web前端专栏收录该内容

18 篇文章

订阅专栏

var test1 = document.getElementById('test1');
var event = new Event('build');
test1.addEventListener('build', function(e){console.log('test1')});
test1.dispatchEvent(event)

页面引入这几行js代码，加载完成后浏览器控制台会输出字符串“test1”

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

automation13

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【JavaScript】如何自定义事件并触发

owo_ovo的博客

02-22

1101

结合案例说明js如何自定义事件，该案例使用chrome推荐的最新写法

JavaScript中的自定义事件

每天都要努力学习哦~~

06-20

1691

我们不仅可以分配事件处理程序，还可以从 JavaScript 生成事件。自定义事件可用于创建“图形组件”。例如，我们自己的基于 JavaScript 的菜单的根元素可能会触发open（打开菜单），select（有一项被选中）等事件来告诉菜单发生了什么。另一个代码可能会监听事件，并观察菜单发生了什么。我们不仅可以生成出于自身目的而创建的全新事件，还可以生成例如click和mousedown等内建事件。这可能会有助于自动化测试。要从代码生成一个事件，我们首先需要创建一个事件对象。通用的。

参与评论您还未登录，请先登录后发表或查看评论

JS中自定义事件的使用与触发操作实例分析

10-16

主要介绍了JS中自定义事件的使用与触发操作,结合实例形式分析了JavaScript自定义事件的创建、监听、触发相关原理与使用技巧,需要的朋友可以参考下

JavaScript 事件触发方法

热门推荐

lqy455949477的博客

02-24

1万+

1. 事件的创建 JS中，最简单的创建事件方法，是使用Event构造器： var myEvent = new Event('event_name'); 但是为了能够传递数据，就需要使用 CustomEvent 构造器： var myEvent = new CustomEvent('event_name', { detail:{ // 将需要传递的数据写在deta...

js实现自定义事件

坚强的泡沫的博客

06-05

882

js实现自定义事件

JQuery的自定义事件代码,触发,绑定简单实例

10-27

`代码段创建了一个自定义事件`myEventName`，并为它绑定了一个匿名函数。当`myEventName`事件被触发时，将执行该匿名函数，弹出一个警告框显示"myEventNametriggered"。接下来是触发自定义事件。在JQuery中，可以...

JavaScript 自定义事件、触发事件

Kate_sicheng的博客

12-17

3685

自定义事件的基本步骤：创建事件、初始化事件、事件监听、事件的触发...

JS自定义事件

qq_41536505的博客

04-25

2258

js的自定义事件可以用CustomEvent这个构造函数来创建，它的方法有dispatchEvent、addEventListener、removeEventListener等

js 自定义事件的使用和触发

在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。

10-25

512

1. 事件的创建 JS中，创建事件方法，是使用Event构造器： var myEvent = new Event('eventName'); 为了能够传递数据，需要使用 CustomEvent 构造器： var myEvent = new CustomEvent('eventName', { detail:{ // 将需要传递的数据写在detail中，以便在EventLi...

javascript-创建自定义事件

weixin_42100456的博客

03-15

192

创建自定义事件创建事件（使用Event对象，或者CustomEvent对象，后者可以传递参数）监听：addEventListener 执行：dispatchEvent，同步调用事件处理程序 Event对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg

怎么创建 JavaScript 自定义事件

开源世界

04-29

247

你肯定处理过很多的事件监听，比如点击事件或者表单提交。事件监听对许多用例来说很有帮助，但是有时我们需要创建自己的自定义事件来处理复杂的交互。在这片短文中，我将告诉你有关创建自定义事件，侦听自定义事件以及创建双击自定义事件所要了解的内容。怎么创建自定义事件创建自定义事件听起来很困难，但是只需要下面简单的一行代码即可。 const myEvent = new Event("myCustomEvent") 复制代码你可以通过事件构造函数创建一个新的 Event 对象。在最基本的形式中，你只需要将一个字符串

DOM深入学习 --- 创建自定义事件（四）

秋天，黄叶坠地，凉风有信。

03-10

1036

创建自定义事件我们不仅可以分配事件处理程序，还可以从 JavaScript 生成事件。 自定义事件可用于创建“图形组件”。例如，我们自己的基于 JavaScript 的菜单的根元素可能会触发 open（打开菜单），select（有一项被选中）等事件来告诉菜单发生了什么。另一个代码可能会监听事件，并观察菜单发生了什么。我们不仅可以生成出于自身目的而创建的全新事件，还可以生成例如 click 和 mousedown 等内建事件。这可能会有助于自动化测试。事件构造器内建事件类形成一个层次结构（hierar

js中自定义事件

睡觉不打呼噜的博客

08-30

590

js中自定义事件结构 <div id="box">box</div> 1.自定义事件:参1事件名;参2为对象,三个字段 //detail字段用来传递数据，可以是任何类型 var customEv = new CustomEvent("look", { bubbles: true, cancelable: false, detail: function(){ console.log(66); } }); 2.监听 (不能用on来绑定): var box=

js原生3种自定义事件方法（createEvent、init\initMouse\UIEvent和Event和CustomEvent）与触发自定义事件（dispatchEvent）

AIWWY的博客

10-27

6226

触发自定义事件 dom.dispatchEvent(eventObject) 触发指定dom节点上绑定的eventObject的type名相同的事件。参数eventObject表示事件对象，是createEvent()、Event()、CustomEvent()方法返回的创建的Event对象。创建自定义事件方法方法一（已被W3C标准弃用，浏览还支持）通过createEvent函数创建，再通过传入的参数对应的方法初始化。 dom.createEvent() 创建一个指定类型的事件。

JS中如何自定义事件

唐泽雪穗

06-25

951

Event()构造函数通过Event()构造函数，创建一个新的事件对象。 const event=new Event(type,eventInit); //type:创建事件的名称，DOMString类型 //eventInit：可选配置项 //包括： //bubbles：是否冒泡，默认值false //cancelable：是否可以被取消，默认值false //composed：是否会在DOM根节点之外触发监听器，默认值false /* *创建一个自定义事件 */ const myEvent=new

Js创建自定义事件React

01-07

### 创建自定义事件在 React 中创建并触发自定义事件可以通过原生 JavaScript 的 `CustomEvent` 接口实现。这种方式允许开发者向 DOM 元素添加更复杂的行为逻辑，而无需依赖于特定框架的方法。 #### 使用 CustomEvent 构造函数为了创建一个新的自定义事件实例，可以使用 `new CustomEvent(type, options)` 方法。其中 `type` 参数指定了事件名称；`options` 对象可选，用于配置细节如冒泡行为、取消默认动作以及传递给监听器的数据 payload[^1]。 ```javascript // 定义一个名为 'custom-event' 的新事件，并携带一些数据作为 detail 属性的一部分 const event = new CustomEvent('custom-event', { bubbles: true, cancelable: false, detail: { message: "This is my custom event!" } }); ``` #### 添加事件处理器一旦有了自定义事件对象，就可以通过标准的 `.addEventListener()` 或者 JSX 内联方式来注册相应的处理程序。对于 React 组件而言，在组件挂载期间绑定这些事件通常是合理的做法之一[^2]。 ```jsx import React, { useEffect } from 'react'; function MyComponent() { const handleCustomEvent = (e) => { console.log(e.detail.message); }; useEffect(() => { window.addEventListener('custom-event', handleCustomEvent); // 清理机制确保卸载时移除事件监听器 return () => { window.removeEventListener('custom-event', handleCustomEvent); }; }, []); return ( <div> {/* ... */} </div> ); } ``` #### 触发自定义事件最后一步是在适当的时候分发这个事件。这通常发生在响应用户的交互操作或者其他业务逻辑之后。利用元素上的 `.dispatchEvent(event)` 函数即可完成此目的[^3]。 ```javascript document.getElementById('myElement').dispatchEvent(event); ``` 上述过程展示了如何在 React 应用中集成自定义事件的功能，从而增强应用程序之间的通信能力而不局限于传统的 prop 和 state 流程之外的方式。