Explication détaillée de plusieurs méthodes permettant à JS de réaliser la surveillance des événements de liaison

Table des matières

1. Utilisez la méthode addEventListener :

2. Ajoutez des attributs d'événement directement dans les balises HTML :

4. Utilisez la méthode on de la bibliothèque jQuery :

Avant de commencer, introduisons à quoi sert la surveillance des événements ?

L'écoute d'événements est un mécanisme permettant de capturer et de répondre à des événements spécifiques. Dans le développement Web, un événement fait référence à une opération interactive effectuée par un utilisateur sur une page Web, telle qu'un clic sur un bouton, un mouvement de souris, une saisie au clavier, etc. Avec l'écoute d'événements, nous pouvons enregistrer des fonctions de gestionnaire d'événements qui seront appelées lorsque certains événements se produiront.

Les fonctions de surveillance des événements comprennent :

Réponse interactive : la réponse en temps réel à l'entrée de l'utilisateur peut être réalisée en surveillant l'opération interactive de l'utilisateur. Par exemple, lorsqu'un utilisateur clique sur un bouton, il peut effectuer les actions correspondantes, telles que soumettre un formulaire, charger des données, afficher/masquer des éléments, etc.
Amélioration de l'expérience utilisateur : grâce à la surveillance des événements, l'expérience utilisateur peut être améliorée, rendant les pages Web plus interactives et dynamiques. Par exemple, changer le style d'un élément lorsque la souris est dessus, ou valider l'entrée de l'utilisateur dans une zone de saisie en temps réel.
Validation du formulaire : en écoutant l'événement de soumission du formulaire, vous pouvez vérifier si les données saisies par l'utilisateur répondent aux exigences et donner les invites ou les messages d'erreur correspondants.
Interaction dynamique : grâce à la surveillance des événements, des effets d'interaction dynamiques peuvent être réalisés, tels que le glisser-déposer d'éléments, la réalisation d'un défilement infini, la réalisation d'une complétion automatique, etc.
Navigation de page : en écoutant les événements de clic des hyperliens ou des boutons de navigation, le saut et la navigation entre les pages peuvent être réalisés.

Dans l'ensemble, la surveillance des événements est une partie importante du développement Web, grâce à laquelle l'interactivité et la dynamique peuvent être réalisées, l'expérience utilisateur peut être améliorée et diverses fonctions et effets interactifs peuvent être réalisés.

introduire:

En ce qui concerne la liaison des écouteurs d'événements, JavaScript propose une variété de méthodes, en fonction de vos besoins et de votre environnement de développement. Vous trouverez ci-dessous une explication détaillée de chaque méthode :

Utilisation addEventListener:
addEventListenerLa méthode est la méthode de l'élément DOM, qui est utilisée pour ajouter des écouteurs d'événements. Il accepte trois paramètres : le type d'événement, la fonction de gestionnaire d'événement et un paramètre booléen facultatif qui spécifie si l'événement se déclenche pendant la phase de capture ou la phase de propagation. L'exemple de code est le suivant :
```
const element = document.getElementById('myElement');
element.addEventListener('click', eventHandler);
```
Ajout d'attributs d'événement directement dans les balises HTML :
il s'agit d'un moyen simple d'ajouter des attributs d'événement directement dans les balises HTML. Vous pouvez utiliser un préfixe sur l'étiquette onsuivi du nom du type d'événement et du gestionnaire d'événements. Lorsque l'événement se déclenche, la fonction spécifiée sera appelée. L'exemple de code est le suivant :
```
<button onclick="eventHandler()">Click me</button>
```
Utilisation ond'attributs :
la plupart des éléments DOM ont des attributs d'événement spécifiques, tels que onclick, onmouseoveretc. Vous pouvez affecter directement des gestionnaires d'événements à ces propriétés. L'exemple de code est le suivant :
```
const element = document.getElementById('myElement');
element.onclick = eventHandler;
```
La façon d'utiliser la bibliothèque jQuery on:
Si vous utilisez la bibliothèque jQuery dans votre projet, elle fournit un moyen plus concis de lier les écouteurs d'événements. Vous pouvez utiliser ondes méthodes pour sélectionner des éléments et spécifier des types d'événements et des gestionnaires. L'exemple de code est le suivant :
```
const element = $('#myElement');
element.on('click', eventHandler);
```

Ces méthodes peuvent implémenter la surveillance des événements et vous pouvez choisir la méthode appropriée en fonction de vos besoins. Il convient de noter que l'utilisation addEventListenerde la méthode est la méthode la plus courante et la plus recommandée, car elle peut ajouter plusieurs écouteurs d'événements en même temps et est plus flexible.

1. `addEventListener`Comment utiliser :

addEventListenerest une méthode courante pour lier les écouteurs d'événements, qui fournit des fonctions plus flexibles et plus puissantes. Voici addEventListenerune explication détaillée de la méthode :

grammaire:

element.addEventListener(event, listener, options);

paramètre:

event: Le type d'événement à surveiller, tel que click, , keydownetc.
listener: La fonction à exécuter lorsque l'événement est déclenché, également appelée fonction de traitement d'événement ou fonction de rappel.
options(Facultatif) : Un objet de configuration, utilisé pour spécifier certaines options d'écoute d'événements, telles que le déclenchement de la phase de capture ou de la phase de bouillonnement. Les options couramment utilisées sont :
- capture: Une valeur booléenne spécifiant si l'événement est déclenché dans la phase de capture ou la phase de bouillonnement, la valeur par défaut est false(phase de bouillonnement).
- once: Une valeur booléenne qui spécifie que l'écouteur d'événement est automatiquement supprimé une fois l'événement déclenché une seule fois, la valeur par défaut est false.
- passive: Une valeur booléenne spécifiant que l'écouteur d'événement ne sera pas appelé preventDefault(), utilisée pour améliorer les performances de défilement, la valeur par défaut est false.

Exemple de code :

const element = document.getElementById('myElement');

function eventHandler(event) {
  // 处理事件的代码
}

element.addEventListener('click', eventHandler);

La méthode peut être utilisée addEventListenerpour ajouter des écouteurs d'événement sur l'élément spécifié. La fonction de gestionnaire d'événements sera appelée lorsque le type d'événement spécifié est déclenché sur l'élément. Vous pouvez appeler la méthode plusieurs fois sur le même élément addEventListenerpour ajouter plusieurs écouteurs d'événement.

addEventListenerLes avantages de la méthode incluent :

Plusieurs écouteurs d'événement peuvent être ajoutés en même temps sans écraser les écouteurs précédents.
La phase de surveillance des événements (phase de capture ou phase de bouillonnement) peut être contrôlée de manière flexible.
Vous pouvez utiliser des options de configuration pour contrôler le comportement des écouteurs d'événements, comme le déclenchement une seule fois, l'amélioration des performances, etc.

Il convient de noter que addEventListenerles écouteurs d'événements ajoutés à l'aide de la méthode peuvent être removeEventListenersupprimés via la méthode. Assurez-vous de supprimer les écouteurs lorsqu'ils ne sont plus nécessaires pour éviter une utilisation inutile de la mémoire et des problèmes de performances.

2. Ajoutez des attributs d'événement directement dans les balises HTML :

L'ajout d'attributs d'événement directement dans les balises HTML est un moyen simple de lier des écouteurs d'événement. En ajoutant des attributs d'événement aux balises HTML, vous pouvez spécifier le type d'événement et la fonction de traitement de l'événement. Lorsque l'événement est déclenché, la fonction spécifiée sera appelée. Voici une explication détaillée de l'ajout d'attributs d'événement directement dans les balises HTML :

grammaire:

<element event="function">

Parmi eux, elementse trouve l'élément HTML, eventle type d'événement à surveiller et functionla fonction de traitement de l'événement.

Exemple de code :

<button onclick="eventHandler()">Click me</button>

eventHandlerDans l'exemple ci-dessus, la fonction sera appelée lorsque le bouton sera cliqué .

Les avantages de l'ajout d'attributs d'événement directement dans les balises HTML incluent :

Simple et intuitif : en ajoutant des attributs d'événement dans les balises HTML, vous pouvez spécifier directement les fonctions de gestion des événements sans code JavaScript supplémentaire.
Mise en œuvre rapide : il convient aux exigences d'interaction simples et ne nécessite pas de logique complexe de traitement des événements.

Cependant, l'ajout d'attributs d'événement directement dans les balises HTML présente certaines limitations et mises en garde :

Un seul gestionnaire d'événements peut être lié à un seul type d'événement et plusieurs gestionnaires d'événements ne peuvent pas être liés en même temps.
Un gestionnaire d'événements doit être une fonction accessible globalement, et non une fonction locale ou anonyme.
Les attributs d'événement dans les balises HTML peuvent interagir avec les écouteurs d'événement dans le code JavaScript, ce qui peut rendre le code difficile à maintenir et à comprendre.

Par conséquent, pour des exigences d'interaction complexes et une meilleure organisation du code, il est recommandé d'utiliser addEventListenerdes méthodes ou d'autres moyens plus flexibles de liaison d'événements. L'ajout d'attributs d'événement directement dans les balises HTML convient aux scénarios d'interaction simples et au prototypage rapide.

3. Utilisez `on`les attributs :

L'utilisation ond'attributs est un moyen d'attacher des écouteurs d'événements aux balises HTML. En définissant onles propriétés, vous pouvez spécifier le type d'événement et la fonction de gestion des événements. Lorsque l'événement se déclenche, la fonction spécifiée sera appelée. Voici une explication détaillée des propriétés utilisées on:

grammaire:

<element onevent="function">

Parmi eux, elementse trouve l'élément HTML, eventle type d'événement à surveiller et functionla fonction de traitement de l'événement.

Exemple de code :

<button onclick="eventHandler()">Click me</button>

eventHandlerDans l'exemple ci-dessus, la fonction sera appelée lorsque le bouton sera cliqué .

Les avantages de l'utilisation ondes attributs incluent :

Simple et intuitif : en définissant des attributs dans les balises HTML on, vous pouvez spécifier directement les fonctions de gestion des événements sans code JavaScript supplémentaire.
Mise en œuvre rapide : il convient aux exigences d'interaction simples et ne nécessite pas de logique complexe de traitement des événements.

Cependant, onil existe certaines limitations et mises en garde concernant l'utilisation des propriétés :

Un seul gestionnaire d'événements peut être lié à un seul type d'événement et plusieurs gestionnaires d'événements ne peuvent pas être liés en même temps.
Un gestionnaire d'événements doit être une fonction accessible globalement, et non une fonction locale ou anonyme.
onLes attributs remplacent les gestionnaires d'événements existants du même type sur l'élément, ce qui peut entraîner un code difficile à maintenir et à comprendre.

En raison des limitations et des considérations ci-dessus, pour des exigences d'interaction complexes et une meilleure organisation du code, il est recommandé d'utiliser addEventListenerdes méthodes ou d'autres moyens plus flexibles de liaison d'événements. L'utilisation onde propriétés convient aux scénarios d'interaction simples et au prototypage rapide.

4. `on`La méthode d'utilisation de la bibliothèque jQuery :

La méthode d'utilisation de la bibliothèque jQuery on()est un moyen plus flexible et plus puissant de liaison d'événements. on()peut être utilisée pour lier des écouteurs d'événements pour un ou plusieurs types d'événements sur un ou plusieurs éléments. Voici une explication détaillée de la méthode utilisant la librairie jQuery on():

grammaire:

$(selector).on(eventType, handler)

Parmi eux, $()se trouve la fonction de sélection jQuery, selectorl'élément à sélectionner, eventTypele type d'événement à surveiller et handlerla fonction de traitement des événements.

Exemple de code :

$("button").on("click", function() {
  // 事件处理逻辑
});

Dans l'exemple ci-dessus, lorsque le bouton est cliqué, la fonction anonyme sera appelée en tant que gestionnaire d'événements.

on()Les avantages de la méthode incluent :

Les gestionnaires d'événements d'un ou plusieurs types d'événements peuvent être liés à un ou plusieurs éléments.
Des écouteurs d'événement peuvent être ajoutés et supprimés dynamiquement pour s'adapter aux éléments générés dynamiquement ou aux besoins changeants dynamiquement.
Vous pouvez utiliser la délégation d'événements pour réduire le nombre de gestionnaires d'événements et améliorer les performances.
Prend en charge les espaces de noms pour gérer les écouteurs d'événements, ce qui facilite l'ajout et la suppression de gestionnaires d'événements spécifiques.

En plus de l'utilisation de base décrite ci-dessus, on()la méthode dispose d'autres options d'utilisation et de configuration avancées, telles que :

Les sélecteurs peuvent être utilisés pour filtrer les éléments qui déclenchent l'événement, et seuls les éléments qui remplissent les conditions du sélecteur déclencheront l'événement.
Vous pouvez spécifier l'ordre dans lequel les événements sont déclenchés et contrôler l'ordre d'exécution des gestionnaires d'événements.
off()Les écouteurs d'événement peuvent être supprimés à l'aide de la méthode.

En bref, la méthode d'utilisation de la bibliothèque jQuery on()peut fournir des fonctions de liaison d'événements plus flexibles et plus puissantes, adaptées à diverses exigences d'interaction complexes et scénarios de traitement d'événements.