Comprendre le mécanisme de bouillonnement d'événements dans JS dans un article

Cet article parle du bouillonnement d'événements et vous donne une compréhension approfondie du mécanisme de bouillonnement d'événements dans JS. J'espère qu'il vous sera utile !

1. Événements

Dans la plate-forme d'application client du navigateur, fondamentalement, tout est piloté par des événements, c'est-à-dire qu'un événement se produit, puis les actions correspondantes sont prises.

                      Les événements du navigateur représentent des signaux indiquant que quelque chose s'est produit. L'explication de l'incident n'est pas l'objet de cet article. Les amis qui ne l'ont pas encore compris peuvent en savoir plus sur Baidu, ce qui aidera à mieux comprendre le contenu suivant.

2. Mécanisme à bulles

Qu'est-ce que le bouillonnement ?

Vous devez comprendre l'image ci-dessous. Les bulles partent du fond de l'eau et montent, du profond au peu profond, jusqu'au sommet. En montant, les bulles traversent différents niveaux d’eau.应 对

En conséquence : Cette bulle est équivalente à notre incident ici, et l'eau est équivalente à l'ensemble de notre arbre DOM ; l'incident est transmis de la couche inférieure de l'arborescence DOM au nœud racine de dom ;

Analyse de cas simple

Définissez un code HTML avec trois éléments dom simples : div1, div2, span, div2 contient span, div1 contient div2 ; et ils sont tous sous le corps :

	<div>
		<div>
			<span>This is a span.</span>
		</div>
	</div>

Le prototype de l'interface est le suivant :

a. Ajoutez la surveillance des événements de clic au corps, lorsque lorsque le corps capture l'événement, il imprime l'heure à laquelle le l'événement s'est produit et les informations du nœud qui ont déclenché l'événement :

<script>
	window.onload = function() {
		document.getElementById("body").addEventListener("click",eventHandler);
	}
	function eventHandler(event) {
		console.log("时间："+new Date(event.timeStamp)+" 产生事件的节点：" + event.target.id +"  当前节点："+event.currentTarget.id);
	}
</script>

Lorsque nous cliquons sur "This is span", div2, div1 et body dans l'ordre, les informations suivantes sont affichées :

​​​​​​​​ ： Analyse des résultats ci-dessus : 以 Qu'il s'agisse du corps, du sous-élément DIV1 du corps ou du sous-élément DIV2 de DIV et de SPAN, lorsque ces éléments sont cliqués par clic, ils se produiront, puis appelleront l'événement correspondant. fonction de gestionnaire. Tout comme les bulles dans l’eau montent de bas en haut, les événements aussi.

Le schéma de livraison d'un événement est le suivant :

Généralement, un événement aura certaines informations pendant le processus de livraison, qui sont les composants de l'événement :

L'heure à laquelle l'événement s'est produit + le lieu où l'événement s'est produit + l'événement Le type + le gestionnaire actuel de l'événement + autres informations ,

nbsp;html>



<script></script>


 
<script>
	window.onload = function() {
		document.getElementById("body").addEventListener("click",eventHandler);
	}
	function eventHandler(event) {
		console.log("时间："+new Date(event.timeStamp)+" 产生事件的节点：" + event.target.id +"  当前节点："+event.currentTarget.id);
	}
</script>
 


	<div>
		<div>
			<span>This is a span.</span>
		</div>
	</div>

Nous voulons maintenant implémenter une telle fonction. Lorsque l'on clique sur div1, "Bonjour, je suis le div le plus à l'extérieur." Lorsque l'on clique sur div2, "Bonjour, je suis le div de la deuxième couche" apparaît lorsque span. est cliqué, "Bonjour, je suis le deuxième div" apparaît. De là, nous aurons l'extrait javascript suivant :

<script>
	window.onload = function() {
		document.getElementById("box1").addEventListener("click",function(event){
			alert("您好，我是最外层div。");
		});
		document.getElementById("box2").addEventListener("click",function(event){
			alert("您好，我是第二层div。");
		});
		document.getElementById("span").addEventListener("click",function(event){
			alert("您好，我是span。");
		});
	}
</script>

<script>
	window.onload = function() {
		document.getElementById("box1").addEventListener("click",function(event){
			alert("您好，我是最外层div。");
			event.stopPropagation();
		});
		document.getElementById("box2").addEventListener("click",function(event){
			alert("您好，我是第二层div。");
			event.stopPropagation();
		});
		document.getElementById("span").addEventListener("click",function(event){
			alert("您好，我是span。");
			event.stopPropagation();
		});
	}
</script>

<script>
	window.onload = function() {
		document.getElementById("box1").addEventListener("click",function(event){
			if(event.target == event.currentTarget)
			{
			    alert("您好，我是最外层div。");
			}
		});
		document.getElementById("box2").addEventListener("click",function(event){
			if(event.target == event.currentTarget)
			{
				alert("您好，我是第二层div。");
			}
		});
		document.getElementById("span").addEventListener("click",function(event){
			if(event.target == event.currentTarget)
			{
			    alert("您好，我是span。");
				
			}
		});
	}
</script>

<script>
	window.onload = function() {
		document.getElementById("body").addEventListener("click",eventPerformed);
	}
	function eventPerformed(event) {
		var target = event.target;
		switch (target.id) {
		case "span": 
			alert("您好，我是span。");
			break;
		case "div1":
			alert("您好，我是第二层div。");
			break;
		case "div2":
			alert("您好，我是最外层div。");
			break;
		}
	}
</script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!