1。イベントフロー
イベントストリームは、ページからイベントが受信される順序を説明しています。しかし、IEはバブルストリームを提案し、Netscape Communicatorはキャプチャストリームを提案します。
JavaScriptイベントストリーム
2。イベントバブル
このイベントは、最も特定の要素(最も深いネスティング階層を持つノード)によって受信され始め、その後、段階的に段階的に特定のノード(ドキュメント)に段階的に伝播します。次のように:
コードコピーは次のとおりです。
<html>
<head>
<title>イベントバブル</title>
</head>
<body>
<div id = "mydiv">私をクリック</div>
</body>
</html>
window.onload = function(){
var obj = document.getElementById( "test");
obj.onclick = function(){
アラート(this.tagname);
};
document.body.onclick = function(){
アラート(this.tagname);
};
document.documentelement.onclick = function(){
アラート(this.tagname);
};
document.onclick = function(){
alert( "document");
};
window.onclick = function(){
アラート( "window");
}
};
イベントの伝播順序:div> body-> html-> document
知らせ:
すべての最新のブラウザはバブルイベントをサポートしていますが、実装にはいくつかの違いがあります。 IE5.5および以前のバージョンのイベントバブルは、ボディからドキュメントに直接ジャンプします(HTMLは実行されません)。 Firefox、Chrome、およびSafari Bubbleイベントは、ウィンドウオブジェクトまでずっとイベントになります。
3.イベントバブルを停止し、デフォルトイベントをキャンセルします
a。イベントオブジェクトを取得します
コードコピーは次のとおりです。
function getEvent(event){
// window.event ie
//イベントnonie
戻りイベント|| window.event;
}
B機能:イベントバブルを停止します
コードコピーは次のとおりです。
関数stopbubble(e){
//イベントオブジェクトが提供されている場合、これは非IEブラウザです
if(e && e.StopPropagation){
//したがって、W3CのStopPropagation()メソッドをサポートします
e.StopPropagation();
} それ以外 {
//それ以外の場合、IEを使用してイベントバブルをキャンセルする必要があります
window.event.cancelbubble = true;
}
}
c。ブラウザのデフォルト動作をブロックします
コードコピーは次のとおりです。
関数stopdefault(e){
//デフォルトのブラウザアクションをブロック(W3C)
if(e && e.preventdefault){
E.PreventDefault();
} それ以外 {
// IEの関数のデフォルトアクションをブロックする方法
window.event.returnvalue = false;
}
falseを返します。
}