|
## Événements en JavaScript
Événements sont des actions ou des occurrences qui se produisent dans une application Web.
Ils sont déclenchés par les interactions de l'utilisateur telles que cliquer sur un bouton, survoler un élément ou appuyer sur une touche du clavier.
D'autres exemples d'événements incluent le redimensionnement d'une fenêtre, le défilement d'un document ou le chargement d'une page.
Les événements peuvent être utilisés pour rendre une application Web plus interactive et réactive en fournissant des commentaires à l'utilisateur et en déclenchant des actions basées sur les entrées de l'utilisateur.
Gestion des événements en JavaScript
Pour gérer les événements en JavaScript, nous pouvons utiliser des écouteurs d'événements.
Les écouteurs d'événements sont des fonctions appelées lorsqu'un événement spécifique se produit sur un élément cible.
Nous pouvons ajouter un écouteur d'événement à un élément en utilisant la méthode `addEventListener()`.
Le premier argument de `addEventListener()` est le nom de l'événement et le deuxième argument est la fonction du gestionnaire d'événements.
```javascript
bouton const =document.querySelector('bouton');
// Ajout d'un écouteur d'événement pour l'événement 'click' sur le bouton
bouton.addEventListener('clic', () => {
console.log('Le bouton a été cliqué !');
});
```
Dans l'exemple ci-dessus, nous ajoutons un écouteur d'événement à un élément bouton pour l'événement `click`.
Lorsque l'utilisateur clique sur le bouton, la fonction de gestionnaire d'événements est exécutée et le message « Le bouton a été cliqué ! » est enregistré sur la console.
Nous pouvons également supprimer les écouteurs d'événements des éléments en utilisant la méthode `removeEventListener()`.
Le premier argument de `removeEventListener()` est le nom de l'événement et le deuxième argument est la fonction du gestionnaire d'événements.
```javascript
bouton.removeEventListener('clic', () => {
console.log('Le bouton a été cliqué !');
});
```
Dans l'exemple ci-dessus, nous supprimons l'écouteur d'événement pour l'événement `click` de l'élément bouton.
Cela signifie que la fonction de gestionnaire d'événements ne sera plus exécutée lorsque l'utilisateur clique sur le bouton.
Objet événement
Lorsqu'un événement se produit, un objet appelé objet événement est créé.
L'objet événement contient des informations sur l'événement, telles que l'élément cible, le type d'événement et la position de la souris.
Nous pouvons accéder à l'objet événement dans une fonction de gestionnaire d'événements en utilisant le paramètre `event`.
```javascript
bouton.addEventListener('clic', (événement) => {
console.log(événement);
});
```
Dans l'exemple ci-dessus, nous enregistrons l'objet événement sur la console.
Cela nous permettra de voir des informations sur l'événement de clic, telles que l'élément cible, le type d'événement et la position de la souris.
Bouillonnage et capture d'événements
Événement bouillonnant fait référence à la manière dont les événements se propagent dans l'arborescence DOM.
Lorsqu'un événement survient, il est d'abord déclenché sur l'élément cible.
Si l'élément cible n'a pas d'écouteur d'événement pour l'événement, l'événement remontera jusqu'à l'élément parent.
Cela continue jusqu'à ce que l'événement atteigne le sommet de l'arborescence DOM.
Capture d'événements est le contraire du bouillonnement d’événements.
Lorsque la capture d'événements est activée, les événements sont d'abord déclenchés en haut de l'arborescence DOM, puis se propagent jusqu'à l'élément cible.
Nous pouvons activer la capture d'événements en définissant le troisième paramètre de la méthode `addEventListener()` sur `true`.
```javascript
bouton.addEventListener('clic', (événement), true);
```
Dans l'exemple ci-dessus, nous activons la capture d'événement pour l'événement `click` sur l'élément bouton.
Cela signifie que l'événement `click` sera d'abord déclenché en haut de l'arborescence DOM, puis se propagera jusqu'à l'élément bouton.
Conclusion
Les événements constituent un élément fondamental de JavaScript et sont utilisés pour rendre les applications Web plus interactives et réactives.
En comprenant le fonctionnement des événements, nous pouvons créer des applications Web plus agréables et plus conviviales.
|
