JavaScript イベントバブリング、イベントキャプチャ、イベント委任の詳細な説明

1. イベントバブリング: JavaScript イベント伝播のプロセスでは、要素でイベントがトリガーされると、そのイベントはドキュメントまで段階的に先行要素に伝播し、一部のブラウザではウィンドウに到達することがあります。すべてのイベントにバブリングがあるわけではありません。例: blurイベント、 focusイベント、 loadイベント

2. イベント委任: イベントキャプチャは、イベントバブリングと正反対です。イベントが要素をトリガーするまで、最上位の祖先要素から開始されます。

js イベントキャプチャは通常、DOM2 イベントモデルaddEventListenerを通じて実装されます。

target.addEventListener(タイプ、リスナー、useCapture)

3 番目のパラメータはデフォルトで false に設定されており、イベントがバブリングフェーズでトリガーされることを示します。true に設定すると、キャプチャフェーズでトリガーされます。一般に、イベントキャプチャは私たちの作業ではほとんど使用されないようです。しかし、まだ理解する必要がある

<div id="ボックス">
    <div id="middle">
        <div id="内部"></div>
    </div>
</div>
<スクリプト>
//イベントキャプチャ window.onload=function(){
    box = document.getElementById("box"); とします。
    middle = document.getElementById("middle"); とします。
    inner を document.getElementById("inner"); とします。
    box.addEventListener("click",function(){console.log("box")},true);
    middle.addEventListener("click",function(){console.log("middle")},true);
    inner.addEventListener("click",function(){console.log("inner")},true);
}
</スクリプト>
innerをクリックすると、コンソールにbox、middle、innerと出力されます。

イベントのバブリングを停止

通常、多数のイベントバブリングイベントが使用されますが、特定の子タグでは親にイベントを渡す必要がない場合があります。このとき、そのイベントのバブリングを防ぐ必要があります。

一般的に、stopPropagation はイベントのバブリングを防ぐために使用されます。IE では、cancelBuble=true が使用されます。stopPropagation もイベントオブジェクト (Event) のメソッドです。その機能は、対象要素のイベントのバブリングを防ぐことですが、デフォルトの動作を防ぐことはできません。

//イベントのバブルを防ぐ let btna = document.getElementById('btn');
btna.onclick=関数(e){
    window.event? window.event.cancelBubble = true : e.stopPropagation();
 };

3. イベント委任: イベント委任はイベントプロキシとも呼ばれます。イベント委任ではイベントバブリングを利用します。イベントハンドラーを 1 つだけ指定することで、特定のタイプのすべてのイベントを管理できます。

利点: DOM 操作を減らすと、Web ページのパフォーマンスが向上します。ページの親要素と多くの子要素が同じイベントを操作する必要がある場合、各要素にイベントをバインドすることはできません。

<ul id="getNum">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<スクリプト>
ptclick = document.getElementById('getNum'); とします。
lilist = ptclick.querySelectorAll('li') とします。
for(let i=0;i<lilist.length;i++){
    lilist[i].index = i;
};
ptclick.onclick = 関数(e){
    var e = e || window.event;
    var ターゲット = e.target || e.srcElement;
    console.log(e.target.index);
};
</スクリプト>