JavaScript におけるイベントバブリングメカニズムの詳細な分析

バブリングとは何ですか?

DOM イベントフローには、イベントキャプチャステージ、ターゲットステージ、イベントバブリングステージの 3 つのステージがあります。

イベントキャプチャ: 簡単に言えば、マウスがクリックされたり、DOM イベントがトリガーされたりすると、ブラウザはルートノードのイベントを外側から内側に伝播します。つまり、子要素がクリックされた場合、親要素がイベントキャプチャを通じて対応するイベントを登録していれば、親要素にバインドされたイベントが最初にトリガーされます。

イベントバブリング (バブリングとも呼ばれる): イベントキャプチャとは対照的に、イベントバブリングは内部からルートノードへのイベント伝播です。

DOM 標準イベントフローのトリガー順序は、最初にキャプチャしてからバブリングします。つまり、DOM イベントがトリガーされると、最初にイベントがキャプチャされ、イベントソースがキャプチャされた後、イベントがイベント伝播を通じてバブリングされます。ブラウザによって実装は異なります。IE10 以下ではキャプチャイベントがサポートされていないため、イベントキャプチャステージが 1 つ少なくなります。IE11、Chrome、Firefox、Safari などのブラウザにはすべてこの機能があります。

addEventListener() メソッド

このメソッドはイベントリスナーを設定し、特定のイベントが発生したときに指定されたパラメータを使用してアクションを実行します。構文は次のとおりです。

イベントリスナーを追加します(イベント、関数、キャプチャの使用)

パラメータ event は必須であり、クリック、タッチスタートなど、プレフィックス on のないイベントなど、監視対象のイベントを示します。

イベントがトリガーされた後に呼び出される関数を示す関数パラメータも必須です。これは外部で定義された関数または匿名関数にすることができます。

パラメーター useCapture はオプションです。イベントがバブリングかキャプチャーかを示すために、true または false を入力できます。true はキャプチャーを意味し、デフォルトの false はバブリングを意味します。

イベントリスナーを削除する

addEventListener() によって追加されたイベントリスナーを削除する場合は、removeEventListener() を使用する必要があります。構文は次のとおりです。

removeEventListener(イベント、関数)

パラメータはaddEventListener()と同じです。

互換性

IE 8 以前、および Opera 7.0 以前では、addEventListener() メソッドと removeEventListener() メソッドはサポートされていません。代わりに次のメソッドを使用します。

イベントを追加します:

アタッチイベント(イベント、関数)

イベントを削除:

**detachEvent(イベント、関数)**

互換性の問題は、次の方法で解決できます。

div1.addEventListener の場合 {
         div1.addEventListener('click', 関数() {
             console.log("サポート")
         });
} そうでない場合 (div1.attachEvent) {
         div1.attachEvent('onclick', 関数() {
             console.log("サポートされていません")
         });
}

バブリングとキャプチャーの具体的な違い

html

    <div id="div1">
         <div id="div2"></div>
    </div>

<スクリプト>
        var div1 = document.getElementById("div1");
        div2 要素を取得します。
        div1.addEventListener('click',function(){
            console.log("div1--キャプチャフェーズ")
        }、真実）;
        div2.addEventListener('click',function(){
            console.log("div2--キャプチャフェーズ")
        }、真実）;
        div1.addEventListener('click',function(){
            console.log("div1--バブルステージ")
        });
        div2.addEventListener('click',function(){
            console.log("div2--バブルステージ")
        });
</スクリプト>

出力結果（div2をクリックしたときの実行結果）

解決

関数stopBubble(e) {
         e && e.stopPropagation の場合 {
                e.stopPropagation(); //W3CのstopPropagation()メソッドをサポートします } else {
             window.event.cancelBubble = true; // それ以外の場合は、IE のメソッドを使用してイベントのバブリングをキャンセルする必要があります}
}

要約する

JavaScript のイベントバブリングメカニズムに関するこの記事はこれで終わりです。JavaScript イベントバブリングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: