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方法。這個方法在事件應該發生的元素上調用。
說明：
- 添加事件處理器
myCustomEvent到按鈕myButton，它會從事件數據中打印消息到控制台 - 創建自訂事件
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