8.1 创建自定义事件
自定义事件（或者用户事件）在JavaScript中让开发者可以创建和分发自己定义的事件，对于应用不同部分之间的信息传递和交互非常有用。创建和使用自定义事件可以改善代码结构和灵活性，提供一种通知和管理应用状态的方式。
为了创建自定义事件，使用的是构造函数CustomEvent。这个构造函数允许创建具有可定制参数和附加数据的新事件。
语法：
const event = new CustomEvent(type, {detail: additionalData});
其中:
type: 表示事件名称的字符串detail: 包含将随事件一起传递的附加数据的对象
创建自定义事件的示例：
JavaScript
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });
8.2 分发自定义事件
使用方法dispatchEvent来分发事件。这个方法被调用在应发生事件的元素上。
解释：
- 给按钮
myButton添加myCustomEvent事件处理器，它会输出事件数据中的消息到控制台 - 创建一个带有消息的自定义事件
myCustomEvent，存储在detail中 - 事件分发到按钮
myButton，激活处理器并输出消息到控制台
示例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Example</title>
</head>
<body>
<button id="myButton">Button</button>
<script>
const button = document.getElementById('myButton');
// 添加自定义事件的处理器
button.addEventListener('myCustomEvent', function(event) {
console.log('Custom event received:', event.detail.message);
});
// 创建和分发自定义事件
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });
button.dispatchEvent(myEvent);
</script>
</body>
</html>
8.3 应用自定义事件
自定义事件对于构建更模块化和可维护的代码特别有用，尤其是在组件和复杂应用程序中。它们可以让一个组件通知其他组件发生了变化或采取了行动。
解释：
- 模块A在
moduleB元素上分发自定义事件notifyB，传递数据 - 模块B监听
notifyB事件并处理它，在控制台输出消息
在模块化应用中使用自定义事件的示例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Module Communication Example</title>
</head>
<body>
<div id="moduleA">Module A</div>
<div id="moduleB">Module B</div>
<script>
const moduleA = document.getElementById('moduleA');
const moduleB = document.getElementById('moduleB');
// 模块A分发自定义事件
function notifyModuleB() {
const event = new CustomEvent('notifyB', { detail: { message: 'Data from Module A' } });
moduleB.dispatchEvent(event);
}
// 模块B监听自定义事件
moduleB.addEventListener('notifyB', function(event) {
console.log('Module B received:', event.detail.message);
});
// 模拟模块A中的操作
notifyModuleB();
</script>
</body>
</html>
8.4 自定义事件的参数
自定义事件可以通过以下参数进行进一步配置：
bubbles: 指定事件是否冒泡的布尔值。默认值为falsecancelable: 指定事件是否可以取消的布尔值。默认值为falsecomposed: 指定事件是否可以跨越shadow DOM树传播的布尔值。默认值为false
示例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Parameters Example</title>
</head>
<body>
<div id="container">
<button id="myButton">Button</button>
</div>
<script>
const container = document.getElementById('container');
const button = document.getElementById('myButton');
// 为容器和按钮添加事件处理器
container.addEventListener('customEvent', function(event) {
console.log('Container received:', event.detail.message);
});
button.addEventListener('customEvent', function(event) {
console.log('Button received:', event.detail.message);
});
// 创建和分发带参数的自定义事件
const myEvent = new CustomEvent('customEvent', {
detail: { message: 'Hello from button' },
bubbles: true,
cancelable: true,
composed: false
});
button.dispatchEvent(myEvent);
</script>
</body>
</html>
GO TO FULL VERSION