JavaScript イベントのバブリング、イベントのキャプチャ、およびブロックのデフォルト イベント コードの例

JavaScript イベント、イベント バブリング、イベント キャプチャ、デフォルト イベントのブロックについて話す これら 3 つのトピックは、面接でも日常業務でも避けるのが困難です。

バブリングの章

まずは例を見てみましょう:

js:

var $input = document.getElementsByTagName("input")[0];
        var $p = document.getElementsByTagName("p")[0];
        var $body = document.getElementsByTagName("body")[0];

        $input.onclick = function(e){
            this.style.border = "5px solid red"
            var e = e || window.e;
            alert("red")
        }
        $p.onclick = function(e){
            this.style.border = "5px solid green"
            alert("green")
        }
        $body.onclick = function(e){
            this.style.border = "5px solid yellow"
            alert("yellow")
        }

html:

<p>
        <input type="button" value="测试事件冒泡" />
    </p>

「赤」、「緑」、「黄色」を順番にポップアップします。

本来の目的はボタン要素をトリガーすることですが、親要素にバインドされたイベントと一緒にトリガーされます。これがイベントバブリングです。

入力へのイベントバインディングが次のように変更された場合:

$input.onclick = function(e){
    this.style.border = "5px solid red"
    var e = e || window.e;
    alert("red")
    e.stopPropagation();
}

イベントのバブリングが防止されているため、この時点では「赤」のみがポップアップします

。

キャプチャー章

イベントのバブリングがあるため、イベントのキャプチャーも可能です。これは逆のプロセスです。違いは、先頭要素からターゲット要素まで、またはターゲット要素から先頭要素までです。

コードを見てください:

$input.addEventListener("click", function(){
    this.style.border = "5px solid red";
    alert("red")
}, true)
$p.addEventListener("click", function(){
    this.style.border = "5px solid green";
    alert("green")
}, true)
$body.addEventListener("click", function(){
    this.style.border = "5px solid yellow";
    alert("yellow")
}, true)

このとき、「黄色」、「緑」、「赤」が順番に表示されます。

イベントのキャプチャです。

addEventListener メソッドの 3 番目のパラメーターを false に変更すると、バブリング段階でのみトリガーされ、ポップアップは「赤」、「緑」、「黄色」になります。

デフォルト イベントの防止

いくつかの

HTML 要素 のデフォルトの動作があります。たとえば、フォーム フォームの送信タイプ入力には、デフォルトの送信タイプ入力のジャンプ アクションがあります。フォームのリセット動作があります。

これらのブラウザーのデフォルトの動作を防止したい場合は、JavaScript がその方法を提供します。

コードから始めましょう

var $a = document.getElementsByTagName("a")[0];
$a.onclick = function(e){
    alert("跳转动作被我阻止了")
    e.preventDefault();
    //return false;//也可以
}

<a href="http://www.nipic.com">昵图网</a>

デフォルトのイベントはなくなりました。

return falseとe.preventDefault()は同じ効果なので、何か違いはあるのでしょうか？もちろんあります。

HTML イベント 属性 および DOM0 レベル イベント処理 メソッド内でのみ、return false を返すことでイベント ホストのデフォルトの動作を整理できます。

注: 上記はすべて

W3C 標準に基づいており、IE のさまざまな実装は考慮されていません。

以上がJavaScript イベントのバブリング、イベントのキャプチャ、およびブロックのデフォルト イベント コードの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。