JS でのバインディングイベントの実行順序の制御の詳細な紹介-jsチュートリアル-php.cn

JS でのバインディングイベントの実行順序の制御の詳細な紹介

黄舟

リリース： 2017-03-01 15:08:01

オリジナル

1280 人が閲覧しました

JS では、バインドされたイベントのデフォルトの実行時間は、キャプチャフェーズではなくバブリングフェーズにあります。このため、親クラスと子クラスの両方がイベントにバインドされている場合、子クラスにバインドされているイベントが最初に呼び出され、次に親クラスのイベントが呼び出されます。以下の例を直接見てください

<!Doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	*{margin:0;padding: 0;}
	</style>
</head>
<body>
<p  id="id1" style="height:400px; background-color:blue; border:1px solid #000;">
	<p id="id2" style="height:200px; background-color:yellow; border:1px solid #000;">
		<p id="id3" style="height:50px; background-color:red; border:1px solid #000;"></p>
	</p>
</p>
</body>
<script type="text/javascript">
	var obj1=document.getElementById(&#39;id1&#39;); 
	obj1.addEventListener(&#39;click&#39;,function(){
		alert(&#39;id1&#39;);
	},false);

	var obj2=document.getElementById(&#39;id2&#39;);
	obj2.addEventListener(&#39;click&#39;,function(){
		alert(&#39;id2&#39;);
	},true);

	var obj3=document.getElementById(&#39;id3&#39;);
	obj3.addEventListener(&#39;click&#39;,function(){
		alert(&#39;id3&#39;);
	},true);
	/*如果第三个参数为true，则事件在捕获阶段执行，如果第三个参数为false，则事件在冒泡阶段执行*/
</script>
</html>

ログイン後にコピー

id3 要素をクリックすると、実行結果は id2、id3、id1 になります

分析: obj2 バインディングメソッドがキャプチャフェーズで実行されるため、obj1 はobj3 にバインドイベントはバブリングフェーズ中に実行されます。

JS はデフォルトでイベントを取得した後、ルート要素から開始してイベントのすべてのリッスンオブジェクトのキャプチャを開始し、それらを 1 つずつ実行します。泡立つ段階。イベントをバインドするときに、イベントがバブリングフェーズで実行されるかキャプチャフェーズで実行されるかを指定できます。

obj.addEventListener(event,function(){},bool)

bool: false、バブリングフェーズでの実行を表します

bool: true、キャプチャフェーズでの実行を表します

補足:イベントバブリング

バブリングを防ぐメソッド

w3cはe.stopPropagation()、IEはe.cancelBubble = trueを使用します

デフォルトの動作を防ぐため

w3c のメソッドは e.preventDefault() ですが、IE は e.returnValue = false;

を使用します。したがって、アピールの例では、すべてのイベントにバブリング動作を追加すると、次のようになります。アピールの JS コードは次のように変更されます:

<script type="text/javascript">
	var obj1=document.getElementById(&#39;id1&#39;); 
	obj1.addEventListener(&#39;click&#39;,function(e){curClick(&#39;id1&#39;);stopPropagation(e)},false);

	var obj2=document.getElementById(&#39;id2&#39;);
	obj2.addEventListener(&#39;click&#39;,function(e){curClick(&#39;id2&#39;);stopPropagation(e)},true);

	var obj3=document.getElementById(&#39;id3&#39;);
	obj3.addEventListener(&#39;click&#39;,function(e){curClick(&#39;id3&#39;);stopPropagation(e)},true);
	
	function curClick(id){
		alert(id);
	}

	function  stopPropagation(e){
		var e = window.event || event;  
	    if(e.stopPropagation) { //W3C阻止冒泡方法  
	        e.stopPropagation();  
	    } else {  
	        e.cancelBubble = true; //IE阻止冒泡方法  
	    } 
	}	 
</script>

ログイン後にコピー

id3 がクリックされたとき: 実行結果: id2

id2 がクリックされたとき: 実行結果: id2

id1 がクリックされたとき: 実行結果: id1

この例を通じて、元々はイベントのバブルアップを妨げ、またイベントが下位レベルにキャプチャされ続けることも妨げていたことがわかりました。

テストに使用したブラウザは次のとおりです: Google Chrome

バージョン 47.0.2526.106 m

上記は、JS でバインディングイベントを制御する実行順序の詳細な紹介です。さらに関連する内容については、注意してください。 PHP 中国語 Web サイト (www .php.cn)!