ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript イベントキャプチャとイベントバブリング
IE 6.0:
p -> body -> html -> document
p -> body -> html - > ; document -> window
注:
すべてのイベントがバブルできるわけではなく、次のイベントはバブルしません:ブラー、フォーカス、ロード、アンロード
<p id="father"> <button id="btn">点击</button></p>#CSS
father{ width: 300px; height: 300px; background-color: red; margin: auto; }
window.onload = function () { var father = document.getElementById("father"); var btn = document.getElementById("btn"); btn.onclick = function () { alert("点击了按钮"); }; father.onclick = function () { alert("点击了父标签"); }; document.onclick = function () { alert("点击了文档"); } }
w3c:event.stopPropagation() proPagation
IE:event .cancelBubble = true
event.cancelBubble = true;
}
バブリングをブロックした後
JS
window.onload = function () { var father = document.getElementById("father"); var btn = document.getElementById("btn"); btn.onclick = function () { if(event && event.stopPropagation){ // w3c标准 阻止冒泡机制 event.stopPropagation(); }else{ // IE系列 IE 678 event.cancelBubble = true; } alert("点击了按钮"); }; father.onclick = function () { if(event && event.stopPropagation){ // w3c标准 阻止冒泡机制 event.stopPropagation(); }else{ // IE系列 IE 678 event.cancelBubble = true; } alert("点击了父标签"); }; document.onclick = function () { alert("点击了文档"); } }
JavaScript ビデオチュートリアル
】
以上がJavaScript イベントキャプチャとイベントバブリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。