JSイベントバインディング基礎--addEventListener

JS関数で指定されたバインディング要素オブジェクトのイベントハンドラのイベントにaddEventListener（）によって結合され、異なる機能の数がイベントターゲットプロセッサと同じイベントに登録することができ、この機能を使用することができます。構文は次のとおりです。

objectTarget.addEventListener(" eventType ", handler , captureFlag );

上記の方法は、パラメータの意味であるobjectTarget結合イベントハンドラハンドラ、次のとおりです。

パラメータ：イベントの種類の文字列（イベントタイプは、クリックイベント、マウスダウン、キーパスなど、上なし属性）。

パラメータ2：イベントハンドラ。（私が書かれている機能）

三つのパラメータ：イベントをリッスン指定された相が広がっ（真と偽の2つの値を、キャプチャ段階、虚偽の表現バブリング段階に真です）。

イベントは、2つの方法で渡しますバブリングとキャプチャ

方法をキャプチャ：実行されたとき、それは外側から内側へ、あるスーパーセットレイヤのサブセットを実行するために、即ち、機能を実行します。

バブル方法：関数、すなわち、親からの電流は、層の一部を実行するために実行する実行されたときにその外部から内部へ、です。

例えば：

あなたは<pは> <div>要素への要素は、ユーザーがクリックする<p>要素、「クリック」イベントの要素は、それをトリガーする場合は？

バブル 、イベントの内部要素が最初にトリガされ、次いで即ち、外部の要素をトリガー：<P>最初の要素がトリガーされたイベントをクリックし、クリックイベントの<div>要素をトリガします。

では 、キャプチャ 、その後、トリガ・イベント<p>要素をクリックし、クリックイベントをトリガするために、<div>要素：、イベントは第一の外部要素がトリガされますが、そのイベントは、内部の要素、すなわちがトリガされます。

次のコードは、この点を示しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>
    
<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
	<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落，我是捕获。 </p>
</div>
    <script>
        document.getElementById("myP").addEventListener("click", function() {
            alert("你点击了 P 元素!");
        }, false);
        document.getElementById("myDiv").addEventListener("click", function() {
            alert(" 你点击了 DIV 元素 !");
        }, false);
        document.getElementById("myP2").addEventListener("click", function() {
            alert("你点击了 P2 元素!");
        }, true);
        document.getElementById("myDiv2").addEventListener("click", function() {
            alert("你点击了 DIV2 元素 !");
        }, true);
    </script>

</body>
</html>

何を理解するためのイラスト

キャプチャモードは、最初のイベントDIV（スーパーセット）を実行し、イベントのpタグ（サブセット）を実行します。

バブル方法は、イベントのpタグ（サブセット）を実行し、その後のイベントDIV（スーパーセット）を実行することです。

JSイベントバインディング基礎--addEventListener

イベントは、2つの方法で渡しますバブリングとキャプチャ

おすすめ