JavaScript - イベントキャプチャ：入門ガイド

こんにちは、未来のJavaScript魔法使いたち！今日、私たちはイベントキャプチャの世界への興奮的な旅に出ます。コードを書いたことがない方也不用担心——あなたの親切なガイドとして、私はこの概念を一緒にステップバイステップで探求します。お気に入りの飲み物を一杯取り、一緒に飛び込みましょう！

JavaScript - Event Capturing

イベントキャプチャとは？

本題に入る前に、シンプルな類似を考えてみましょう。家族聚会で、愛らしい従妹が面白いことを言ったとします。笑いは祖父母（最も年配の世代）から始まり、あなたの親に移り、最後にあなたに達します。これがJavaScriptでのイベントキャプチャの仕組みに似ています！

Web開発の世界では、イベントキャプチャはイベントの伝播の段階で、イベントが最も外側の要素によって最初にキャプチャされ、次に内部要素に伝播されるものです。まるで「パスザパーセル」のようなゲームですが、イベントを使っています！

それでは、もう少し技術的な言葉で説明します：

ウェブページ上でイベント（クリックなど）が発生すると、クリックした要素だけでなく、以下のことが起こります。
イベントはDOM（ドキュメントオブジェクトモデル）ツリーの頂点から始まります。
それから、すべての親要素を通じてターゲット要素に達するまで伝播します。
この下方への旅が「イベントキャプチャ」と呼ばれます。

基本的なイベントキャプチャの例

イベントキャプチャがどのように動作するかを簡単な例で見てみましょう。シンプルなHTML構造を作成し、JavaScriptを追加してキャプチャの動作を示します。

<div id="outer">
<div id="middle">
<div id="inner">クリックしてね！</div>
</div>
</div>

<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

outer.addEventListener('click', function() {
console.log('Outer divクリック');
}, true);

middle.addEventListener('click', function() {
console.log('Middle divクリック');
}, true);

inner.addEventListener('click', function() {
console.log('Inner divクリック');
}, true);
</script>

この例では、3つのネストされた<div>要素があります。JavaScriptコードは各divにクリックイベントリスナーを追加します。addEventListenerのtrueパラメータはイベントキャプチャを有効にします。

最も内側のdivをクリックすると、コンソールに以下の出力が見られます：

Outer div clicked
Middle div clicked
Inner div clicked

これはイベントが最も外側の要素から最も内側の要素にキャプチャされることを示しています。まるでイベントが「こんにちは！」と各親に挨拶しながらターゲットに向かうようなものです。

デフォルト動作を阻止する例

時々、イベントのデフォルト動作を阻止したいことがあります。例えば、フォームの送信を止めたり、リンクをフォローしないようにします。イベントキャプチャでこれをどのように行うか見てみましょう：

<div id="container">
<a href="https://www.example.com" id="link">クリックしてね！</a>
</div>

<script>
const container = document.getElementById('container');
const link = document.getElementById('link');

container.addEventListener('click', function(event) {
console.log('Containerクリック');
event.preventDefault();
}, true);

link.addEventListener('click', function(event) {
console.log('Linkクリック');
}, true);
</script>

この例では、container div内にリンクがあります。containerのイベントリスナーはevent.preventDefault()を使用してリンクのデフォルト動作を阻止します。

リンクをクリックすると、以下のようになります：

Container clicked
Link clicked

しかし、リンクは実際にはURLに移動しません。まるでcontainerが「いや、ここで留まるんだよ！」と言っているようなものです。

伝播を止める例

時々、イベントがDOMツリーを下方に進むのを止めたいことがあります。event.stopPropagation()を使用してこれを行うことができます。見てみましょう：

<div id="grandparent">
<div id="parent">
<div id="child">クリックしてね！</div>
</div>
</div>

<script>
const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');

grandparent.addEventListener('click', function(event) {
console.log('Grandparentクリック');
}, true);

parent.addEventListener('click', function(event) {
console.log('Parentクリック');
event.stopPropagation();
}, true);

child.addEventListener('click', function(event) {
console.log('Childクリック');
}, true);
</script>

この家族をテーマにした例では、child divをクリックすると以下のようになります：

Grandparent clicked
Parent clicked

イベントはparentで止まり、childには到達しません。まるでparentが「ここまでだよ、若いイベント！」と言っているようなものです。

締め括り

そして、皆さん、ここまで来ましたね！私たちはイベントキャプチャの土地を旅し、デフォルト動作の阻止から伝播の停止までを学びました。イベントキャプチャはJavaScriptのイベントフローの一環であり、メインイベント（言い換え intended）の前座です。

以下に、私たちが使用したメソッドの簡単なまとめを示します：

メソッド	説明
`addEventListener(event, function, useCapture)`	要素にイベントハンドラを追加します。`useCapture`を`true`に設定するとイベントキャプチャが有効になります。
`event.preventDefault()`	イベントのデフォルト動作を阻止します。
`event.stopPropagation()`	イベントがDOMツリーを上方に伝播することを阻止し、親のハンドラがイベントを通知されるのを防ぎます。

これらの概念を練習し、コードを遊びながら、プロのようにイベントをキャプチャするようになるまでがんばってください！プログラミングは人生と同じで、旅も目的地と同じに重要です。幸せなコーディングを、そしてあなたのイベントが常にしっかりとキャプチャされることを祈っています！

Credits: Image by storyset

前のチュートリアル:

JavaScript - イベントのバubbling

次のチュートリアル:

JavaScript - カスタムイベント