JavaScript - イベントバブリング：初級者向けガイド
こんにちは、未来のJavaScript魔法使いさんたち！?今日は、イベントバブリングの世界に興味深く飛び込んでみましょう。これまでに聞いたことがないとしても心配しないでください。このチュートリアルの終わりまでに、あなたは知識で満ち満ちてしまいます！（ここで何をしているか気づいた？?）
イベントバブリングとは？
家族の集まりで、いとこにジョークを言ったとしましょう。いとこは笑い、その声を聞いた叔母がニコニコ、そして祖父母が聞いて giggle し始めます。これがJavaScriptでのイベントバブリングに少し似ています！
技術的な言葉では、イベントバブリングはHTML DOM（ドキュメントオブジェクトモデル）ツリー内でのイベントの伝播方法の一つです。要素上でイベントが発生すると、まずその要素のハンドラを実行し、次に親要素、そして他の祖先要素にまで伝播します。
簡単な例で説明しましょう：
<div id="grandparent">
<div id="parent">
<button id="child">クリックしてね！</button>
</div>
</div>document.getElementById('child').addEventListener('click', function() {
console.log('子要素がクリックされた！');
});
document.getElementById('parent').addEventListener('click', function() {
console.log('親要素がクリックされた！');
});
document.getElementById('grandparent').addEventListener('click', function() {
console.log('祖父母要素がクリックされた！');
});ボタンをクリックすると、コンソールに以下のように表示されます：
子要素がクリックされた！
親要素がクリックされた！
祖父母要素がクリックされた！これがイベントバブリングの作用です！イベントはボタン（子要素）から始まり、親要素に、そして祖父母要素に伝播します。
イベントバブリングのステップ
基本的な概念を理解したので、イベントバブリングのステップを分解しましょう：
- 最も深い要素（ターゲット要素）でイベントが発生します。
- ターゲット要素のイベントハンドラが実行されます。
- イベントは親要素に伝播し、そのイベントハンドラが実行されます。
- これは
documentオブジェクトに達するまで続きます。
まるで「パスザパレル」のゲームのように、各要素がDOMツリーを上りながらイベントを処理するチャンスを得ます。
2つのネストされたDIVを用いたイベントバブリング
より実践的な例として、2つのネストされたdivを見てみましょう：
<div id="outer" style="background-color: blue; padding: 20px;">
<div id="inner" style="background-color: red; padding: 20px;">
クリックしてね！
</div>
</div>document.getElementById('outer').addEventListener('click', function() {
console.log('外側のdivがクリックされた');
});
document.getElementById('inner').addEventListener('click', function() {
console.log('内側のdivがクリックされた');
});内側の赤いdivをクリックすると、以下のように表示されます：
内側のdivがクリックされた
外側のdivがクリックされたイベントは内側のdivから始まり、外側のdivに伝播します。まるで池に小石を投げるときの波紋が中心から外側に広がるのと同じです！
3つのネストレベルを用いたイベントバブリング
さあ、例にさらなるレベルを追加してみましょう：
<div id="grandparent" style="background-color: green; padding: 20px;">
<div id="parent" style="background-color: blue; padding: 20px;">
<div id="child" style="background-color: red; padding: 20px;">
クリックしてね！
</div>
</div>
</div>document.getElementById('grandparent').addEventListener('click', function() {
console.log('祖父母のdivがクリックされた');
});
document.getElementById('parent').addEventListener('click', function() {
console.log('親のdivがクリックされた');
});
document.getElementById('child').addEventListener('click', function() {
console.log('子のdivがクリックされた');
});最も内側の赤いdivをクリックすると、以下のように表示されます：
子のdivがクリックされた
親のdivがクリックされた
祖父母のdivがクリックされたまるで家族の階級順のように、最年少者がまず話し、次に親、そして祖父母が続く感じです！
イベントバブリングを止める
時々、このバブリング行動を止めたいと思うかもしれません。もしかしたら、祖父母がそのジョークを聞きたくないかもしれませんね！JavaScriptでは、stopPropagation()メソッドを使ってこれを行うことができます：
document.getElementById('child').addEventListener('click', function(event) {
console.log('子のdivがクリックされた');
event.stopPropagation();
});今度は、子のdivをクリックすると以下のように表示されます：
子のdivがクリックされたイベントはその場で止まり、まるでボトルに栓をしたようにです！
イベント処理における有用なメソッド
以下に、JavaScriptでのイベント処理に役立つメソッドの表を示します：
| メソッド | 説明 |
|---|---|
addEventListener() |
エレメントにイベントハンドラを追加します |
removeEventListener() |
エレメントからイベントハンドラを削除します |
event.stopPropagation() |
イベントがDOMツリーを上るのを止めます |
event.preventDefault() |
イベントのデフォルト動作を阻止します |
event.target |
イベントを触发した要素を返します |
event.currentTarget |
イベントリスナーが触发された要素を返します |
結論
そして、みんな！JavaScriptでのイベントバブリングの概念についての旅が終わりました。イベントバブリングを理解することは、ウェブアプリケーションでの複雑なイベント処理を管理する上で非常に重要です。まるで家族の集まりでの動きを理解するのと同じで、誰が何を聞いているかを知ることで混乱を避けることができます！
これらの例で練習し、さまざまなネスト構造を試してみてください。そうすることで、プロのようにイベントを処理できるようになります。ハッピーコーディング、そしてあなたのイベントが常にスムーズにバブリングしますように！?
Credits: Image by storyset