DOM イベントフローの 3 つの段階の詳細な説明-jsチュートリアル-php.cn

DOM イベントフローの 3 つの段階の詳細な説明

青灯夜游

リリース： 2019-11-30 17:15:57

転載

5682 人が閲覧しました

イベントが発生すると、特定の順序で要素ノード間で伝播されます。この伝播プロセスは DOM イベントストリームです。

DOM イベントフローの 3 つの段階の詳細な説明

#DOM イベントフローは、次の 3 つの段階に分かれています。

#キャプチャフェーズ:イベントがドキュメントノードからターゲットノードまで上から下に伝播されるステージ;

ターゲットフェーズ:実際のターゲットノードはイベントを処理しています。

バブリングステージ : イベントがターゲットノードからドキュメントノードに上から下に伝播されるステージ。

#キャプチャフェーズ:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div>
        <div>son盒子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            console.log('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            console.log('father');
        }, true);
        document.addEventListener('click', function() {
            console.log('document');
        }, true);
    </script>
</body>

</html>

ログイン後にコピー

コンソール出力は次のとおりです:

キャプチャフェーズイベントがドキュメントノードからターゲットノードに上から下に伝播されていることがわかります。

#バブルステージ:

<script>
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            console.log('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            console.log('father');
        }, false);
        document.addEventListener('click', function() {
            console.log('document');
        })
    </script>

ログイン後にコピー

コンソール出力:

バブリングフェーズイベントがターゲットノードからドキュメントノードに上から下に伝播していることがわかります。

注:

1. JS コードは、キャプチャステージまたはバブリングステージのいずれか 1 つだけを実行できます (キャプチャまたはバブリングのいずれか)。 bubble)

2、onclick とattachEvent (すなわち) はバブリングステージのみを取得できます

3、addEventListener(type,listener [,useCapture ]) 3 番目のパラメーターが true

の場合、

イベントキャプチャフェーズでイベントハンドラーを呼び出すことを意味し、false の場合 ( は記述しないでください)デフォルトは false) で、これはイベントハンドラーがイベントバブリングフェーズ##4 中に呼び出されることを意味します。実際の開発では、イベントキャプチャを使用することはほとんどありません。イベントのバブリングに注意してください

5。onblur、onfocus、onmouseenter、onmouseleave

6 など、一部のイベントはバブリングしません。場合によってはトラブルを引き起こすこともありますが、停止することは可能です。メソッドは次のとおりです:

stopPropagation()

stopPropagation()メソッド : 終了イベントが伝播されます。さらに、伝播プロセスのキャプチャ、ターゲット処理、またはバブリング段階でも同様です。このメソッドを呼び出した後、そのノード上のイベントのハンドラーが呼び出され、イベントは他のノードにディスパッチされなくなります。

この記事は js チュートリアル列からのものです。ぜひ学習してください。

以上がDOM イベントフローの 3 つの段階の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。