イベントハンドリングモデル - バブリング、キャプチャー

イベントのバブリング

要素がイベントを受け取ると、受け取ったイベントを親に渡し、ウィンドウまで渡します。

demo1

後のデモをこの図と組み合わせることで、html htmlコードをより理解することができます：

<div class="grandfather">
 <div class="father">
 <div class="child"></div>
 </div>
</div> 

cssコード：

.grandfather{
 width: 300px;
 height: 300px;
 background-color: red;
 }
 .father{
 width: 200px;
 height: 200px;
 background-color: blue;
 }
 .child{
 width: 100px;
 height: 100px;
 background-color: yellow;
 }

jsコード：

var oGrandfather = document.getElementsByClassName("grandfather")[0];
var oFather = document.getElementsByClassName("father")[0];
var oChild = document.getElementsByClassName("child")[0];
oGrandfather.addEventListener('click',function () {
 console.log("grandfather--red")
}, false)
oFather.addEventListener('click',function () {
 console.log("father--blue")
}, false)
oChild.addEventListener('click',function () {
 console.log("child--yellow")
}, false)

構造的にネストされた関係を持つ要素は、イベントバブリング機能を持ちます。

demo2

上記のcssに

 .father{
 margin-left: 300px;
 }
 .child{
 margin-left: 200px;
 }

黄色のエリアをクリックすると、あるいは黄色のエリアだけをクリックすると、子供--黄色、父親--青、祖父--赤が順番にトリガーされます。コードの

イベントのキャプチャ

構造的にネストされた関係を持つ要素は、親要素からのイベントキャプチャのために存在します。

demo1

イベント・キャプチャを有効にするために、jsコードのadddeventListenerのfalseをtrueに変更してください。

oGrandfather.addEventListener('click',function () {
 console.log("grandfather--red")
}, true)
oFather.addEventListener('click',function () {
 console.log("father--blue")
}, true)
oChild.addEventListener('click',function () {
 console.log("child--yellow")
}, true)

黄色の部分のみをクリックすると、祖父-赤、父-青、子-黄色がトリガーされ、外側から内側に向かって順次キャプチャされ実行されます。

demo2

また、黄色の部分のみをクリックすると、外側から内側に向かって、祖父-赤、父-青、子-黄の順に発動します

最初にキャプチャ、次にバブル

同じイベントタイプの同じオブジェクトで、2つのイベントハンドラ関数のバインディングの上に、1つはバブルに、もう1つはキャプチャに、要素をクリックした後、最初にキャプチャをトリガし、次にバブルをトリガします。

demo

html,cssのコードは上記に従い、jsの一部を変更します。

oGrandfather.addEventListener('click',function () {
 console.log("grandfather--red--イベントのキャプチャ")
}, true)
oFather.addEventListener('click',function () {
 console.log("father--blue--イベントのキャプチャ")
}, true)
oChild.addEventListener('click',function () {
 console.log("child--yellow--イベントのキャプチャ")
}, true)
oGrandfather.addEventListener('click',function () {
 console.log("grandfather--red--バブリングイベント")
}, false)
oFather.addEventListener('click',function () {
 console.log("father--blue--バブリングイベント")
}, false)
oChild.addEventListener('click',function () {
 console.log("child--yellow--バブリングイベント")
}, false)

キャプチャされたイベントとバブリングイベントの順序を変更

oGrandfather.addEventListener('click',function () {
 console.log("grandfather--red--バブリングイベント")
}, false)
oFather.addEventListener('click',function () {
 console.log("father--blue--バブリングイベント")
}, false)
oChild.addEventListener('click',function () {
 console.log("child--yellow--バブリングイベント")
}, false)
oGrandfather.addEventListener('click',function () {
 console.log("grandfather--red--イベントのキャプチャ")
}, true)
oFather.addEventListener('click',function () {
 console.log("father--blue--イベントのキャプチャ")
}, true)
oChild.addEventListener('click',function () {
 console.log("child--yellow--イベントのキャプチャ")
}, true)

エフェクトは、黄色い部分をクリックすることでトリガーされます。 ご覧のように、イベントのトリガー順序は、最初にキャプチャ、次にバブルとなっており、イベントソースは、イベントバインディングの順序に従ってトリガーされます。

バブリングのキャンセル

W3C標準イベント.stopPropagation();