Un événement est une partie importante de .Une page Web répond en fonction d'un événement survenu. Certains événements sont générés par l'utilisateur et certains sont générés par des API. Dans cet article, nous verrons comment les événements se produisent et comment la méthode addEventListener en JavaScript est utilisée dans la séquence suivante:
- Qu'est-ce que Event Listener?
- AddEventListener () en JavaScript
- Valeurs des paramètres
- AddEventListener dans JavaScript: exemple
Qu'est-ce que Event Listener?
Un écouteur d'événement est une procédure en JavaScript qui attend qu'un événement se produise. L'exemple simple d'un un événement est un utilisateur qui clique sur la souris ou qui appuie sur une touche du clavier.
La addEventListener () est un intégré Fonction JavaScript qui prend l'événement à écouter, et un deuxième argument à appeler chaque fois que l'événement décrit est déclenché. N'importe quel nombre de gestionnaires d'événements peut être ajouté à un seul élément sans écraser les gestionnaires d'événements existants.
addEventListener () en JavaScript
Certains Caractéristiques de la méthode de l'écouteur d'événements comprennent:
- La addEventListener () méthode attache un gestionnaire d'événements à l'élément spécifié.
- Cette méthode attache un gestionnaire d'événements à un élément sans écrasement gestionnaires d'événements existants.
- Vous pouvez ajouter de nombreux gestionnaires d'événements à un élément.
- Vous pouvez ajouter de nombreux gestionnaires d'événements du du même type à une élément , c'est-à-dire deux événements de «clic».
- Des écouteurs d'événements peuvent être ajoutés à n'importe quel JUGEMENT objet non seulement des éléments HTML. c'est-à-dire l'objet de fenêtre.
- La méthode addEventListener () le rend Plus facile pour contrôler comment le l'événement réagit à bouillonner.
Lors de l'utilisation de la méthode addEventListener (), le JavaScript est séparé du balisage, pour une meilleure lisibilité et vous permet d'ajouter des écouteurs d'événements même lorsque vous ne contrôlez pas le balisage HTML.
comment installer php sur windows 10
En outre, vous pouvez facilement supprimer un écouteur d'événement en utilisant le removeEventListener (), méthode .
Syntaxe:
target.addEventListener (type, listener [, options]) target.addEventListener (type, listener [, useCapture]) target.addEventListener (type, listener [, useCapture, wantUntrusted])
Valeurs des paramètres
| Paramètre | La description |
un événement | Obligatoire. Une chaîne qui spécifie le nom de l'événement. Remarque: n'utilisez pas le préfixe «on». Par exemple, utilisez «click» au lieu de «onclick». Pour une liste de tous les événements HTML DOM, consultez notre référence complète d'objet d'événement HTML DOM. |
fonction | Obligatoire. Spécifie la fonction à exécuter lorsque l'événement se produit. Lorsque l'événement se produit, un objet événement est passé à la fonction en tant que premier paramètre. Le type d'événement objet dépend de l'événement spécifié. Par exemple, l'événement «click» appartient à l'objet MouseEvent. |
useCapture | Optionnel. Une valeur booléenne qui spécifie si l'événement doit être exécuté dans la capture ou dans la phase de bullage. Valeurs possibles: true - Le gestionnaire d'événements est exécuté dans la phase de capturefalse - Default. Le gestionnaire d'événements est exécuté dans la phase de bullage |
Maintenant que vous savez comment fonctionne un écouteur d'événements, examinons un exemple de addEventListener () en JavaScript.
addEventListener () en JavaScript: exemple
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt Cet exemple utilise la méthode addEventListener () pour exécuter une fonction lorsqu'un utilisateur clique sur un bouton. ('myBtn'). addEventListener ('click', myFunction) function maFonction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
Avec cela, nous arrivons à la fin de cet addEventListener en JavaScript. J'espère que vous avez compris comment l'auditeur de l'événement méthode fonctionne en JavaScript.
Découvrez notre qui vient avec une formation en direct animée par un instructeur et une expérience de projet réelle. Cette formation vous permet de maîtriser les compétences nécessaires pour travailler avec les technologies Web back-end et front-end. Il comprend une formation sur le développement Web, jQuery, Angular, NodeJS, ExpressJS et MongoDB.
associé qualifié tableau desktop 9
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires du blog «addEventListener in JavaScript» et nous vous répondrons.