JavaScriptのあれらのピットの事件は泡が立ちます.

2296 ワード

JavaScript 先端事件が勃発する

私の前のブログでは、イベントエージェントの使い方をまとめました.転送ゲート:JavaScriptのイベントエージェントです.
事件に言及した以上、事件の泡が立つことに言及しなければならない.これは多くのバグの張本人である.
事件の捕獲と事件の発生
事件の捕獲と事件の泡立ちをもう一回温めてみましょう.
イベントキャプチャフェーズ:イベントは、イベントターゲットに捕獲されるまで、最上位のタブから下へ検索される.
イベントの泡立ち段階:イベントはイベントのターゲットから始まり、ページの最上位のタブまで泡を上げる.
addEvent Listener
ここで一つの方法を話さなければならない.
イベントをバインドする方法.addEvent Listener();(IE 8ブラウザの下ではatachEvent();IE 9および以上はaddEvent Listenerに対応可能です.)
addEvent Listenerには三つのパラメータが含まれています.一つはイベント名で、二つ目はイベント実行の関数で、最後はイベントキャプチャです.
最後のパラメータのtrueはイベントトラッピングを表し、falseは時間的泡立ちを表しています.
例えば、obj.addEvent Listener(「onclick」、function(){}、true/false);注意:イベント名を書くときは「on」プレフィックス(「onload」「onclick」など)をつけます.
事件の泡を防ぐ
事件の泡が出るのは簡単です.例えばdivAにはspanBがあります.二つの容器にはそれぞれのonclick事件がありますが、spanBのonclick事件を触発すると自動的に泡が出て、divAのonclickイベントが発生します.divAのonclick事件を触発したくないなら、事件の泡が出るのを止める必要があります.次の例のように.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>    </title>
<style type="text/css">
	#A{width: 200px;height: 200px;background-color: red;position: relative;}
	#B{width: 100px;height: 100px;background-color: green;position: absolute;}
</style>
<script type="text/javascript">
window.onload=function(){
	var oDiv=document.getElementById('A');
	var oSpan=document.getElementById('B');
	oDiv.onclick=function(ev){
		var oEvent=ev||event;
		oDiv.style.display='none';
	}
	oSpan.onclick=function(ev){
		var oEvent=ev||event;
		oSpan.style.display='none';
		stopEventBubble(oEvent);
	}
	//         
	function stopEventBubble(event){
		var e=event || window.event;
		if (e && e.stopPropagation){
			e.stopPropagation();    
		}else{
			e.cancelBubble=true;
		}
	}
}
</script>
</head>
<body>
<div id="A">
	<span id="B"></span>
</div>
</body>
</html>

これでspanのonclick事件がdivに波及するのを阻止できます.
oSpanのonclick関数の中のstopEventBbbleを削除すると;この言葉は事件の泡を防ぐことができません.どんな結果になるか、みんなも分かりますよ.
イベントの泡出しを防ぐためには、単にstopPropopopopoppegation()を使用することができます.方法は、preventDefault();メソッドは、ブラウザのデフォルトイベント、使用法とstopPropopopopopopgation()を阻止します.同じです

Open＊＊アクセス権限の制御