创建自定义事件需使用new event()或new customevent()构造函数，2. 通过dispatchevent()方法触发事件，3. 使用addeventlistener()监听事件，4. customevent可通过detail属性传递数据，5. 设置bubbles为true使事件冒泡，6. 将cancelable设为true并调用preventdefault()可取消默认行为，7. 在web components中需设置composed: true以穿透shadow dom，8. 框架如vue的$emit、angular的eventemitter均基于自定义事件实现组件通信，自定义事件是实现组件解耦与跨层级通信的核心机制，能够显著提升代码的模块化与可维护性。
JavaScript创建自定义事件，简单来说，就是允许你在特定情况下触发一些特定的行为。这有点像给你的代码增加了一个“如果…那么…”的条件反射机制。
创建自定义事件，是为了让你的代码更灵活，更易于维护。
如何创建和触发自定义事件？
创建和触发自定义事件其实并不难，主要分为两步：创建事件对象，然后触发它。
-
创建事件对象：
你可以使用
new Event()
构造函数来创建一个新的事件对象。 构造函数接受两个参数：
- 事件的类型（例如，
"myCustomEvent"
） - 一个可选的配置对象，用于设置事件的属性，例如
bubbles
（是否冒泡）和cancelable
（是否可以取消）。
const myEvent = new Event('myCustomEvent', { bubbles: true, cancelable: true }); - 事件的类型（例如，
-
触发事件：
有了事件对象，接下来需要找到要触发该事件的元素，然后使用
dispatchEvent()
方法来触发它。const element = document.getElementById('myElement'); element.dispatchEvent(myEvent);这样，当
myElement
元素触发了myCustomEvent
事件时，任何监听该事件的函数都会被执行。
如何监听自定义事件？
监听自定义事件和监听原生事件（例如
click或
mouseover）没什么区别，都是使用
addEventListener()方法。
const element = document.getElementById('myElement');
element.addEventListener('myCustomEvent', function(event) {
console.log('自定义事件被触发了！', event);
});这样，每当
myElement元素触发
myCustomEvent事件时，控制台就会输出一条消息。
自定义事件可以传递数据吗？
当然可以！ 你可以使用
CustomEvent构造函数来创建可以传递数据的自定义事件。
CustomEvent构造函数接受与
Event构造函数相同的参数，但它还接受一个
detail属性，用于存储要传递的数据。
const myEvent = new CustomEvent('myCustomEvent', {
detail: {
message: 'Hello from custom event!',
data: { some: 'data' }
},
bubbles: true,
cancelable: true
});
const element = document.getElementById('myElement');
element.addEventListener('myCustomEvent', function(event) {
console.log('自定义事件被触发了！', event.detail); // 输出: { message: 'Hello from custom event!', data: { some: 'data' } }
});
element.dispatchEvent(myEvent);这样，你就可以在事件处理函数中通过
event.detail属性访问传递的数据了。
为什么自定义事件的bubbles
属性很重要？
bubbles属性决定了事件是否会冒泡。如果
bubbles设置为
true，那么当事件在一个元素上触发时，它会沿着DOM树向上冒泡，直到到达文档根元素。这允许父元素监听子元素触发的自定义事件。
云模块_YunMOK网站管理系统采用PHP+MYSQL为编程语言，搭载自主研发的模块化引擎驱动技术，实现可视化拖拽无技术创建并管理网站！如你所想，无限可能，支持创建任何网站：企业、商城、O2O、门户、论坛、人才等一块儿搞定！永久免费授权，包括商业用途； 默认内置三套免费模板。PC网站+手机网站+适配微信+文章管理+产品管理+SEO优化+组件扩展+NEW Login界面.....目测已经遥遥领先..
例如：
在这个例子中，当点击
child按钮时，会触发
myCustomEvent事件。由于
bubbles设置为
true，该事件会冒泡到
parent元素，因此
parent元素的事件处理函数也会被执行。如果
bubbles设置为
false，那么
parent元素就不会捕获到该事件。
如何取消自定义事件的默认行为？
如果你的自定义事件需要取消某些默认行为，你可以将
cancelable属性设置为
true。然后在事件处理函数中调用
event.preventDefault()方法来取消默认行为。
const myEvent = new CustomEvent('myCustomEvent', {
bubbles: true,
cancelable: true
});
const element = document.getElementById('myElement');
element.addEventListener('myCustomEvent', function(event) {
if (confirm('确定要取消默认行为吗？')) {
event.preventDefault();
console.log('默认行为被取消了！');
} else {
console.log('默认行为未被取消。');
}
});
element.addEventListener('click', function(event) {
element.dispatchEvent(myEvent);
});在这个例子中，当点击
myElement元素时，会触发
myCustomEvent事件。如果用户在确认对话框中点击“确定”，则会调用
event.preventDefault()方法来取消
click事件的默认行为。
如何在Web Components中使用自定义事件？
Web Components是构建可重用UI组件的强大工具。自定义事件在Web Components中扮演着重要的角色，允许组件与外部世界进行通信。
在Web Components中使用自定义事件与在普通JavaScript中使用自定义事件基本相同。你只需要在组件内部创建和触发事件，然后在组件外部监听这些事件。
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
this.shadowRoot.getElementById('myButton').addEventListener('click', () => {
const myEvent = new CustomEvent('my-component-event', {
detail: { message: 'Button clicked!' },
bubbles: true,
composed: true // 允许事件穿透shadow DOM
});
this.dispatchEvent(myEvent);
});
}
}
customElements.define('my-component', MyComponent);
document.body.innerHTML = '在这个例子中，当点击
my-component组件内部的按钮时，会触发一个名为
my-component-event的自定义事件。
composed: true属性允许事件穿透shadow DOM，因此外部的JavaScript代码可以监听该事件。
自定义事件在框架和库中有什么应用？
许多流行的JavaScript框架和库（例如React、Vue和Angular）都广泛使用自定义事件来实现组件之间的通信和状态管理。
例如，在React中，你可以使用回调函数和props将数据从子组件传递到父组件。但是，对于更复杂的组件层次结构，使用自定义事件可能更清晰和灵活。
在Vue中，你可以使用
$emit方法来触发自定义事件，并在父组件中使用
v-on指令来监听这些事件。
在Angular中，你可以使用
EventEmitter类来创建自定义事件，并在组件的模板中使用
@Output装饰器来公开这些事件。
总而言之，自定义事件是JavaScript中一种强大而灵活的机制，可以用于构建更模块化、可重用和可维护的代码。掌握自定义事件的使用，可以帮助你更好地理解和使用各种JavaScript框架和库。
