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のハンドラを追加し、イベントデータのメッセージをコンソールに出力します - イベント
detailにメッセージを持つカスタムイベントmyCustomEventを作成します - ボタン
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 カスタムイベントの適用例
カスタムイベントは、よりモジュール化されメンテナンスしやすいコードを作成するのに役立ちます。特にコンポーネントや複雑なアプリに取り組むときに有用です。1つのコンポーネントが他のコンポーネントに変更やアクションを通知することができます。
説明:
- モジュールAはカスタムイベント
notifyBを要素moduleBでディスパッチし、データを渡します - モジュール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: イベントがシャドウ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