interface Web
js tutoriel
Explication détaillée des compétences d'événement javascript bubbling_javascript
Explication détaillée des compétences d'événement javascript bubbling_javascript
Les événements sont l'un des contenus centraux de JavaScript. L'application des événements implique inévitablement un concept important, qui est le bouillonnement d'événements. Avant d'introduire le bouillonnement d'événements, introduisons un autre concept important :
.
1. Qu'est-ce que le flux d'événements :
Le modèle objet de document (DOM) est une structure arborescente, qui peut être représentée de manière vivante par la figure suivante.
Si un élément html déclenche un événement, alors l'événement sera propagé dans un certain ordre entre le nœud déclencheur et le nœud racine dans l'arborescence DOM. Tous les nœuds passants recevront l'événement déclenché. Ce processus de propagation est appelé C'est. un flux d'événements. Selon l'ordre de propagation des événements, ils peuvent être divisés en deux catégories, l'une est le bouillonnement d'événements et l'autre est la capture d'événements, ce qui fait intervenir le sujet qui sera introduit dans ce chapitre :
1. Événement bouillonnant :
Ce qu'on appelle le bouillonnement temporel signifie que lorsqu'un élément déclenche un événement, l'événement sera comme une bulle, se propageant de l'élément déclencheur à tous ses nœuds parents. L'événement sera reçu jusqu'au nœud racine correspondant. L'événement est enregistré dans la fonction de gestionnaire d'élément parent, alors même si l'événement est déclenché sur le nœud enfant, la fonction de gestionnaire d'événements enregistrée sur l'élément parent sera également déclenchée. Par exemple, dans l'illustration ci-dessus, si l'événement onclick de l'élément a est déclenché, alors ses éléments parents p, document et window recevront tous cet événement, et si une fonction de traitement du temps est enregistrée sur l'élément parent correspondant, alors cette fonction de traitement d'événements s'exécutera, regardez un exemple de code :
<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
var table=document.getElementById("mytable");
table.onclick=function(e){
var event=e||window.event;
target=event.srcElement||event.target;
alert(target.innerHTML);
}
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
<td>脚本之家</td>
<td>脚本之家</td>
<td>脚本之家</td>
</tr>
<tr>
<td>脚本之家</td>
<td>脚本之家</td>
<td>脚本之家</td>
</tr>
<tr>
<td>脚本之家</td>
<td>脚本之家</td>
<td>脚本之家</td>
</tr>
</table>
</body>
</html>Le but du code ci-dessus est de faire apparaître le contenu dans la cellule correspondante lorsque l'on clique sur la cellule correspondante. Cependant, dans l'implémentation ci-dessus, le gestionnaire d'événements onclick n'est pas enregistré pour chaque cellule. Au lieu de cela, le gestionnaire d'événements onclick est enregistré sur la table des éléments parent de la cellule. Lorsque vous cliquez sur la cellule, l'événement onclick sera déclenché et l'événement sera déclenché. Il se propage également vers le haut à partir de l'objet événement, et l'élément table a un gestionnaire d'événement onclick enregistré. Ce gestionnaire sera exécuté à ce moment-là. Bien sûr, le problème de la transmission des paramètres de l'objet événement sera défini ici. Tous les navigateurs prennent en charge le bouillonnement d'événements. 2. Capture d'événement :
La capture d'événements est exactement l'opposé du bouillonnement d'événements. Lorsqu'un élément est cliqué, la direction de propagation de l'événement va de l'élément racine vers l'élément déclencheur. IE ne prend pas en charge cela. Pour la prise en charge entre navigateurs, le bouillonnement est généralement utilisé par défaut. Modèle de traitement des événements de bulles.
2.javascript empêche le code de bouillonnement d'événement
La propagation d'événements est très utile dans certains scénarios, mais elle doit parfois être évitée. Voici un exemple de code compatible avec tous les principaux navigateurs pour empêcher la propagation d'événements.
Exemple de code :
function stopBubble(e)
{
if(e&&e.stopPropagation)
{
e.stopPropagation();
}
else
{
window.event.cancelBubble=true;
}
}
Le code ci-dessus peut empêcher l'événement de bouillonner. Voici un bref commentaire sur le code :
2. Commentaires du code :
- 1. function stopBubble(e) {}, cette fonction est utilisée pour empêcher les événements de bouillonner, et le paramètre est un objet événement.
- 2. if(e&&e.stopPropagation){e.stopPropagation();}, déterminez si stopPropagation est pris en charge. S'il est pris en charge, utilisez e.stopPropagation(). La fonction stopPropagation() n'est pas prise en charge par IE10 et les navigateurs inférieurs à IE10.
- 3.window.event.cancelBubble=true, le navigateur IE actuel l'utilise pour empêcher la propagation d'événements.
Ce qui précède est une introduction détaillée au bouillonnement d’événements JavaScript. J’espère que cela sera utile à l’apprentissage de chacun.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comprendre le mécanisme de bouillonnement d'événements : Pourquoi un clic sur un élément enfant affecte-t-il l'événement de l'élément parent ?
Jan 13, 2024 pm 02:55 PM
Comprendre le bouillonnement d'événements : pourquoi un clic sur un élément enfant déclenche-t-il un événement sur l'élément parent ? Le bouillonnement d'événements signifie que dans une structure d'éléments imbriqués, lorsqu'un élément enfant déclenche un événement, l'événement sera transmis à l'élément parent couche par couche comme un bouillonnement, jusqu'à l'élément parent le plus à l'extérieur. Ce mécanisme permet aux événements sur les éléments enfants de se propager dans toute l'arborescence des éléments et de déclencher tour à tour tous les éléments associés. Pour mieux comprendre le bouillonnement d'événements, examinons un exemple de code spécifique. Code HTML : <divid="parent&q
Pourquoi l'événement click dans js ne peut-il pas être exécuté à plusieurs reprises ?
May 07, 2024 pm 06:36 PM
Les événements de clic en JavaScript ne peuvent pas être exécutés à plusieurs reprises en raison du mécanisme de propagation des événements. Pour résoudre ce problème, vous pouvez prendre les mesures suivantes : Utiliser la capture d'événement : Spécifiez un écouteur d'événement à déclencher avant que l'événement ne se déclenche. Remise des événements : utilisez event.stopPropagation() pour arrêter le bouillonnement des événements. Utilisez une minuterie : déclenchez à nouveau l'écouteur d'événements après un certain temps.
Raisons et solutions de l'échec de jQuery .val()
Feb 20, 2024 am 09:06 AM
Titre : Raisons et solutions de l'échec de jQuery.val() Dans le développement front-end, jQuery est souvent utilisé pour faire fonctionner des éléments DOM. La méthode .val() est largement utilisée pour obtenir et définir la valeur des éléments de formulaire. Cependant, nous rencontrons parfois des situations où la méthode .val() échoue, entraînant l'incapacité d'obtenir ou de définir correctement la valeur de l'élément de formulaire. Cet article explorera les causes de l'échec de .val(), fournira les solutions correspondantes et joindra des exemples de code spécifiques. 1.Méthode d'analyse des causes.val()
Pourquoi le bouillonnement d'événements se déclenche-t-il deux fois ?
Feb 22, 2024 am 09:06 AM
Pourquoi le bouillonnement d'événements se déclenche-t-il deux fois ? Le bouillonnement d'événement (Event Bubbling) signifie que dans le DOM, lorsqu'un élément déclenche un événement (comme un événement de clic), l'événement bouillonne de l'élément vers l'élément parent jusqu'à ce qu'il bouillonne vers l'objet document de niveau supérieur. La diffusion d'événements fait partie du modèle d'événement DOM, qui permet aux développeurs de lier des écouteurs d'événements aux éléments parents, de sorte que lorsque des éléments enfants déclenchent des événements, ceux-ci puissent être capturés et traités via le mécanisme de diffusion. Cependant, les développeurs rencontrent parfois des événements qui se déclenchent deux fois.
Pour quels scénarios les modificateurs d'événements dans vue peuvent-ils être utilisés ?
May 09, 2024 pm 02:33 PM
Les modificateurs d'événements Vue.js sont utilisés pour ajouter des comportements spécifiques, notamment : empêcher le comportement par défaut (.prevent) arrêter le bouillonnement d'événements (.stop) événement ponctuel (.once) capturer l'événement (.capture) écouter passivement les événements (.passive) Adaptatif modificateur (.self)Modificateur de touche (.key)
Qu'est-ce que le bouillonnement d'événements ? Analyse approfondie du mécanisme de bouillonnement des événements
Feb 20, 2024 pm 05:27 PM
Qu’est-ce que le bouillonnement d’événements ? Analyse approfondie du mécanisme de diffusion d'événements. La diffusion d'événements est un concept important dans le développement Web, qui définit la manière dont les événements sont diffusés sur la page. Lorsqu'un événement sur un élément est déclenché, l'événement sera transmis à partir de l'élément le plus interne et transmis vers l'extérieur jusqu'à ce qu'il soit transmis à l'élément le plus externe. Cette méthode de livraison est comme des bulles bouillonnant dans l’eau, c’est pourquoi on l’appelle bouillonnement événementiel. Dans cet article, nous analyserons en profondeur le mécanisme de bouillonnement d’événements. Le principe du bouillonnement d’événements peut être compris à travers un exemple simple. Supposons que nous ayons un H
Quels événements JS ne bouillonnent pas ?
Feb 19, 2024 pm 09:56 PM
Quelles sont les situations dans les événements JS qui ne bouillonneront pas ? Le bouillonnement d'événements (Event Bubbling) signifie qu'après le déclenchement d'un événement sur un certain élément, l'événement sera transmis vers le haut le long de l'arborescence DOM, de l'élément le plus interne à l'élément le plus externe. Cette méthode de transmission est appelée bouillonnement d'événements. Cependant, tous les événements ne peuvent pas surgir. Il existe des cas particuliers dans lesquels les événements ne surgissent pas. Cet article présentera les situations en JavaScript dans lesquelles les événements ne bouillonneront pas. 1. Utilisez stopPropagati
Quels sont les événements JS qui ne bouillonnent pas ?
Feb 18, 2024 pm 06:31 PM
Quels sont les événements JS qui ne bouillonneront pas ? JavaScript est un langage de script puissant qui ajoute de l'interactivité et du dynamisme aux pages Web. En JavaScript, la programmation événementielle est une partie très importante. Les événements font référence à diverses opérations effectuées par les utilisateurs sur des pages Web, telles que des clics sur des boutons, des mouvements de souris, des saisies au clavier, etc. JavaScript répond à ces événements via des fonctions de gestion d'événements et effectue les opérations correspondantes. La diffusion d'événements est un mécanisme courant lors du traitement des événements. Le bouillonnement d'un événement signifie que lorsqu'un
