JS事件の泡立ち行為
7114 ワード
バブルの物理的挙動を想像してみてください.つまり、アップフローです.jsのバブル挙動もそうです.サブエレメントのイベントを実行すると、挙動がアップフローし、親エレメントも同じ挙動を実行します(挙動が同じで、実行関数が異なる場合があります).
構文の形式:
stopPropagation()
例:
ブラウザで「hello」と「word」のプロンプトボックスが順次ポップアップされます.
この時eventが加わった.stopPropagation()メソッドでは、親要素divのクリックイベントは実行されず、ボタンのクリックイベントは1回のみ実行され、イベントのバブル挙動が阻止されます.
構文の形式:
stopPropagation()
例:
<body>
<div id="div">
<button id="btn"> </button>
</div>
<script>
document.getElementById("btn").addEventListener("click",showBtn);//
document.getElementById("div").addEventListener("click",showDiv);// div
function showBtn(event) {
alert("hello");
}
function showDiv() {
alert("word");
}
</script>
</body>ブラウザで「hello」と「word」のプロンプトボックスが順次ポップアップされます.
<body>
<div id="div">
<button id="btn"> </button>
</div>
<script>
document.getElementById("btn").addEventListener("click",showBtn);//
document.getElementById("div").addEventListener("click",showDiv);// div
function showBtn(event) {
alert("hello");
event.stopPropagation();
}
function showDiv() {
alert("word");
}
</script>
</body>この時eventが加わった.stopPropagation()メソッドでは、親要素divのクリックイベントは実行されず、ボタンのクリックイベントは1回のみ実行され、イベントのバブル挙動が阻止されます.