JAvascriptにおけるイベントバブルとイベントキャプチャメカニズムの詳細
1307 ワード
JAvascriptにおけるイベントバブルとイベントキャプチャメカニズムの詳細
両方の役割:イベントトリガタイミングの問題を記述する
≪イベント・キャプチャ|Event Capture|emdw≫:documentからイベントをトリガーするノード、すなわち上から下へのイベントのトリガー---外から内へ
イベントバブル:下から上へのトリガイベント---内側から外側へ
バインドイベントメソッドの3番目のパラメータは、イベントのトリガ順序がイベントキャプチャであるかどうかを制御することです.
true、イベントキャプチャ;false、イベントバブル
一般的なデフォルトfalse、すなわちイベントバブル
Jqueryのe.stopPropagationは泡を止める.DOMまで祖先級の事件は触発しないという意味だ.
次に、私が試した例を示します.
例では3番目のtrueを追加しました.イベントキャプチャです.
追加しない場合はデフォルトのイベントバブルです.この場合、イベントトリガタイミングは内側から外側になります.
以上javascriptの中の事件の泡と事件の捕獲のメカニズムの詳しい解で、もし疑問があれば伝言あるいは当駅のコミュニティに行って討論を交流してもらって、読書に感謝して、みんなを助けることができることを望んで、みんなの当駅に対する支持に感謝します!
両方の役割:イベントトリガタイミングの問題を記述する
≪イベント・キャプチャ|Event Capture|emdw≫:documentからイベントをトリガーするノード、すなわち上から下へのイベントのトリガー---外から内へ
イベントバブル:下から上へのトリガイベント---内側から外側へ
バインドイベントメソッドの3番目のパラメータは、イベントのトリガ順序がイベントキャプチャであるかどうかを制御することです.
true、イベントキャプチャ;false、イベントバブル
一般的なデフォルトfalse、すなわちイベントバブル
Jqueryのe.stopPropagationは泡を止める.DOMまで祖先級の事件は触発しないという意味だ.
次に、私が試した例を示します.
window.onload = function () {
document.getElementById("parent").addEventListener("click",function(e){
alert("parent ,"+this.id);
},true)
document.getElementById("child").addEventListener("click",function(e){
alert("child ,"+this.id)
},true)
}
parent
child
例では3番目のtrueを追加しました.イベントキャプチャです.
追加しない場合はデフォルトのイベントバブルです.この場合、イベントトリガタイミングは内側から外側になります.
以上javascriptの中の事件の泡と事件の捕獲のメカニズムの詳しい解で、もし疑問があれば伝言あるいは当駅のコミュニティに行って討論を交流してもらって、読書に感謝して、みんなを助けることができることを望んで、みんなの当駅に対する支持に感謝します!