Mécanisme d'événement et blocage dans jq et js

La liaison d'événements dans JQuery est entièrement bouillonnante d'événements. Dans cet article, nous partagerons avec vous le mécanisme d'événements et la prévention dans jq et js.

Les différentes façons de lier les fonctions de traitement d'événements dans JQuery ne nous permettent pas de transmettre le type d'événement (bullage d'événement ou capture d'événement ). Par exemple :

.on(events [, selector ] [, data ], handler)

Paramètres
événements - Tapez une chaîne avec un ou plusieurs types d'événements séparés par des espaces et des espaces de noms facultatifs, tels que "clic", "clic focus" ", "keydown.myPlugin".
eventsMap - Le type d'objet est un objet Objet, chacun de ses attributs correspond au type d'événement et à l'espace de noms facultatif (événements de paramètre), et la valeur de l'attribut correspond à la fonction de traitement d'événement liée (gestionnaire de paramètres) .
selector - Facultatif/Type String Un sélecteur jQuery utilisé pour spécifier quels éléments descendants peuvent déclencher des événements liés. Si ce paramètre est nul ou omis, cela signifie que l'élément actuel lui-même est lié à l'événement (le déclencheur réel peut également être un élément descendant, tant que le flux d'événements peut atteindre l'élément actuel).
data - facultatif/tout type de données qui doivent être transmises à la fonction de traitement d'événements via event.data lorsqu'un événement est déclenché.
handler - fonction de gestion des événements spécifiée par type de fonction.

Le addEventListener() fourni par javascript natif permet de définir le type d'événement

element.addEventListener(event, function, useCapture)

Paramètres
événement - requis. Chaîne spécifiant le nom de l'événement.

Remarque : N'utilisez pas le préfixe « on ». Par exemple, utilisez « clic » au lieu de « onclick ».

fonction - obligatoire. Spécifiez la fonction à exécuter lorsque l'événement est déclenché.

Lorsque l'objet événement est passé dans la fonction comme premier paramètre. Le type d'objet événement dépend de l'événement spécifique. Par exemple, l'événement « click » appartient à l'objet MouseEvent.
useCapture - Facultatif. Une valeur booléenne qui spécifie si l'événement est exécuté en phase de capture ou de bouillonnement.

Valeurs possibles :
true - le gestionnaire d'événements est exécuté pendant la phase de capture
false- false- Default. Le gestionnaire d'événements est exécuté pendant la phase de bouillonnement

Deux façons d'empêcher la propagation des événements

Méthode 1 : Utiliser la fonction stopPropagation() de l'objet événement. Cette approche est cohérente avec JavaScript.

$("#outC").click(function(event){  
    event.stopPropagation();  
});

Méthode 2 : La valeur de retour de la fonction de traitement d'événement est fausse. Le addEventListener en JavaScript n'a pas cette fonction.

$("#outC").click(function(event){  
    return false;  
});

<<>

Déclaration de droits d'auteur : Cet article est d'abord publié sur ma station personnelle Keyon Y, veuillez indiquer la source.

La liaison d'événements dans JQuery est un bouillonnement d'événements.

Les différentes manières de lier les fonctions de traitement d'événements dans JQuery ne nous permettent pas de transmettre le type d'événement (bullage d'événement ou capture d'événement). Par exemple :

.on(events [, selector ] [, data ], handler)

Paramètres

événements - Tapez une chaîne avec un ou plusieurs types d'événements séparés par des espaces et des espaces de noms facultatifs, tels que "clic", "clic focus" ", "keydown.myPlugin".
eventsMap - Le type d'objet est un objet Objet, chacun de ses attributs correspond au type d'événement et à l'espace de noms facultatif (événements de paramètre), et la valeur de l'attribut correspond à la fonction de traitement d'événement liée (gestionnaire de paramètres) .
selector - Facultatif/Type String Un sélecteur jQuery utilisé pour spécifier quels éléments descendants peuvent déclencher des événements liés. Si ce paramètre est nul ou omis, cela signifie que l'élément actuel lui-même est lié à l'événement (le déclencheur réel peut également être un élément descendant, tant que le flux d'événements peut atteindre l'élément actuel).
data - facultatif/tout type de données qui doivent être transmises à la fonction de traitement d'événements via event.data lorsqu'un événement est déclenché.
handler - fonction de gestion des événements spécifiée par type de fonction.

Le addEventListener() fourni par javascript natif permet de définir le type d'événement

element.addEventListener(event, function, useCapture)

Paramètres

événement - requis. Chaîne spécifiant le nom de l'événement.

Remarque : N'utilisez pas le préfixe « on ». Par exemple, utilisez « clic » au lieu de « onclick ».

fonction - obligatoire. Spécifiez la fonction à exécuter lorsque l'événement est déclenché.

Lorsque l'objet événement est passé dans la fonction comme premier paramètre. Le type d'objet événement dépend de l'événement spécifique. Par exemple, l'événement « click » appartient à l'objet MouseEvent.

useCapture - Facultatif. Une valeur booléenne qui spécifie si l'événement est exécuté en phase de capture ou de bouillonnement.

Valeurs possibles :

true - le gestionnaire d'événements est exécuté pendant la phase de capture
false- false- Default. Le gestionnaire d'événements est exécuté pendant la phase de bouillonnement

Deux façons d'empêcher la propagation des événements

Méthode 1 : Utiliser la fonction stopPropagation() de l'objet événement. Cette approche est cohérente avec JavaScript.

$("#outC").click(function(event){  
    event.stopPropagation();  
});

Méthode 2 : La valeur de retour de la fonction de traitement d'événement est fausse. Le addEventListener en JavaScript n'a pas cette fonction.

$("#outC").click(function(event){  
    return false;  
});

Recommandations associées :

Mécanisme d'événement JavaScript

Un premier aperçu du mécanisme d'événement JQuery (2) (1)_jquery

Une brève analyse du mécanisme d'événement en JavaScript_Connaissances de base

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!