jQuery addEventListener

Dans l’article d’aujourd’hui, nous allons découvrir la fonction addEventListener dans jQuery.

AddEventListener dans jQuery

JavaScript fournit la méthode intégrée addEventListener() de l’interface EventTarget. Cette méthode configure une fonction à appeler chaque fois que l’événement spécifié est envoyé à la cible.

jQuery fournit une méthode équivalente appelée .on(). Similaire à la méthode addEventListener de JavaScript, la méthode .on() attache une fonction de gestionnaire d’événements aux éléments sélectionnés pour un ou plusieurs événements.

Syntaxe:

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

1. Events est une chaîne représentant un ou plusieurs types d’événements, séparés par des espaces et des espaces de noms facultatifs, par exemple, Click ou keydown.myPlugin.
2. Le selector représente une chaîne de sélection/correspondance pour filtrer les descendants des éléments choisis qui déclenchent l’événement. Si le selector n’est pas passé ou null, l’événement est envoyé à chaque fois que l’élément sélectionné est atteint.
3. Data est transmis au contrôleur dans event.data lorsqu’un événement est déclenché.
4. handler est une fonction exécutée lorsque l’événement est déclenché. Si la fonction handler renvoie null, une valeur false est également autorisée comme raccourci.

Aux éléments actuellement sélectionnés, la méthode .on() de jQuery attache des gestionnaires d’événements à l’objet. La méthode .on() donne toutes les fonctionnalités pour attacher des gestionnaires d’événements.

N’importe quel nom d’événement peut être utilisé comme argument d’événement. jQuery itère/boucle sur les types d’événements JavaScript standard du navigateur et appelle la fonction handler lorsque le navigateur échoue en raison d’actions de l’utilisateur, par exemple .click, qui déclenche des événements.

La technique .trigger() peut également amener les noms d’événements de navigateur standard et les noms d’événements personnalisés à appeler des gestionnaires connectés. Les noms d’événement doivent incorporer les meilleurs caractères alphanumériques, traits de soulignement et deux-points.

Comprenons-le avec l’exemple simple suivant.

<button id="btn">Hello World!</button>

$('#btn').on('click', () => {console.log('Click event is fired.')})

Dans l’extrait de code ci-dessus, nous avons défini le bouton. Une fois que l’utilisateur clique sur le bouton, l’événement click est envoyé et la fonction handler est invoquée.

Ceci est similaire à la méthode .click(), qui déclenche en interne la méthode on('click').

Essayez d’exécuter l’extrait de code ci-dessus dans n’importe quel navigateur prenant en charge jQuery. Le résultat suivant s’affiche.

"Click event is fired."

Démo