Heim > Artikel > Web-Frontend > Detaillierte Einführung in die Steuerung der Ausführungsreihenfolge von Bindungsereignissen in JS

Detaillierte Einführung in die Steuerung der Ausführungsreihenfolge von Bindungsereignissen in JS

黄舟Original: 2017-03-01 15:08:011274Durchsuche

In JS liegt die Standardausführungszeit gebundener Ereignisse in der Bubbling-Phase, nicht in der Erfassungsphase. Aus diesem Grund wird, wenn sowohl die übergeordnete als auch die untergeordnete Klasse an ein Ereignis gebunden sind, zuerst das an die untergeordnete Klasse gebundene Ereignis und dann das Ereignis der übergeordneten Klasse aufgerufen. Schauen Sie sich das folgende Beispiel direkt an

<!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>

Wenn auf das id3-Element geklickt wird, lautet das Ausführungsergebnis: id2, id3, id1

Analyse: Da die von obj2 gebundene Methode in der Erfassungsphase ausgeführt wird, werden die von obj1 und obj3 gebundenen Ereignisse in der Bubbling-Phase ausgeführt. JS in Standardmäßig beginnt es nach dem Abrufen des Ereignisses mit der Erfassung aller Überwachungsobjekte des Ereignisses beginnend mit dem Stammelement und führt sie dann einzeln in der Bubbling-Phase aus. Beim Binden des Ereignisses können wir angeben, ob das Ereignis in der Bubbling-Phase oder der Capture-Phase ausgeführt wird.

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

bool:false, stellt die Ausführung der Bubbling-Phase dar

bool:true, stellt die Ausführung der Erfassungsphase dar

Ergänzung: Event-Bubbling

Blasenbildung verhindern

w3cs Methode ist e.stopPropagation(), IE verwendet e.cancelBubble = true;

Standardverhalten verhindern

w3cs Methode ist e.preventDefault(), IE verwendet e .returnValue = false;

Wenn wir also im Einspruchsbeispiel das Verhalten „Bubbling verhindern“ für alle Ereignisse hinzufügen:

Das heißt, der JS-Code im Einspruch ist wie folgt geändert:

Wenn auf id3 geklickt wird: Ausführungsergebnis: id2

Wenn auf id2 geklickt wird angeklickt: Ausführungsergebnis: id2

Wenn auf id1 geklickt wird: Ausführungsergebnis: id1

Durch dieses Beispiel wurde festgestellt, dass das Ereignis am Sprudeln gehindert wurde, und auch Verhinderte Ereignisse werden weiterhin auf niedrigeren Ebenen erfasst.

Der zum Testen verwendete Browser ist: Google Chrome Version 47.0.2526.106 m

<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>

Das Obige ist die Steuerbindung in JS Eine detaillierte Einführung in die Ereignisausführungssequenz finden Sie auf der chinesischen PHP-Website (www.php.cn) für weitere verwandte Inhalte!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Objektorientierte JavaScript-Programmierung (Vererbungsimplementierung)Nächster Artikel：Objektorientierte JavaScript-Programmierung (Vererbungsimplementierung)

In Verbindung stehende Artikel

Mehr sehen