JS addEventListener関数3番目のパラメータuseCapture使用説明

11817 ワード
listener
概要
「DOM 2レベルイベント」は、イベントハンドラの指定と削除を処理するための2つの方法を定義しています.
public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false):void
彼らは3つのパラメータを受け入れます.処理するイベント名と、イベントハンドラの関数として、ブール値を指定します.最後のブール値パラメータがtrueであれば、イベントキャプチャ段階でイベントハンドラを起動することを表します.falseであれば、イベントの泡立ち段階でイベントハンドラを起動するという意味です.
使用
1.イベントの追加
addEvent Listenerは、一つの要素に複数のイベントを追加することができる.
var oDiv = document.getElementById("div1");



oDiv.addEventListener("click",

function() {

    alert(this.id);

},

false);



oDiv.addEventListener("click",

function() {

    alert("clicked me");

},

false);
oDivノードをクリックして、先にノードID“div 1”を出力して、更に“clicked me”を出力します.
2.イベントの削除
addEventListener()に追加されたイベントハンドラはremoveEventListener()を使って除去するしかないです.除去時に入ってきたパラメータは、処理プログラムを追加する時に使用したパラメータと同じです.これは、addEventListener()によって追加された匿名関数が除去されないことを意味する.
var oDiv = document.getElementById("div1");



oDiv.addEventListener("click",

function() {

    alert(this.id);

},

false);



oDiv.removeEventListener("click",

function() { 

    alert(this.id);

},

false); //
同じパラメータを使っているように見えますが、実際に入ってきたのは全く別の関数です.イベントを正確に削除したいなら、次のように書きます.
var oDiv = document.getElementById("div1");



var handler = function() {

    alert(this.id);

}



oDiv.addEventListener("click", handler, false);



oDiv.removeEventListener("click", handler, false); //
討論する
ここでは主にuseCaptureパラメータの使い方について議論します.まずコードを見ます.
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="div1" style="background: blue;width: 100px; height: 100px;">

        <div id="div2" style="background: red;width: 70px; height: 70px;">

            <div id="div3" style="background: yellow;width: 50px; height: 50px;"></div>

        </div>

    </div>

    <script type="text/javascript">

        var oDiv1 = document.getElementById('div1'),

            oDiv2 = document.getElementById('div2'),

            oDiv3 = document.getElementById('div3');



        oDiv1.addEventListener('click', showBlue, true);

        oDiv2.addEventListener('click', showRed, false);

        oDiv3.addEventListener('click', showYellow, true);



        function showBlue(){ // 

            alert("blue");

        }



        function showRed(){ // 

            alert("red");

        }



        function showYellow(){// 

            alert("yellow");

        }

    </script>

</body>

</html>
div 3をクリックした後、プロセスは三つの段階に分けられます.
キャプチャ段階:外->では、div 1でuseCapture属性がtrueであることを検出し、イベントキャプチャ段階でイベントが発生するので、プログラムを実行して「blue」を出力します.div 2でuseCapture属性がfalseであることが検出されました.すなわち、イベントの発泡段階はトリガされますので、プログラムは実行されません.目標段階:目標はdiv 3に行って、div 3はマウスのクリックするノードであることを発見しました.だからここは目標段階です.イベントハンドラがあれば、このプログラムを実行し、「ハロー」を出力します.ここはuseCaptureがtrueかfalseかを問わない.泡が出る段階:里--外 div 2でuseCapture属性がfalseであることが検出されました.すなわち、イベントの発泡段階がトリガされるため、プログラムが実行され、「red」が出力されます.div 1でuseCapture属性がtrueであることが検出されました.つまりイベントキャプチャ段階でイベントが発生するので、プログラムは実行されません.
プログラムの実行結果は「blue」「yellow」「red」です.
WKWebView+webkit