Un esdeveniment és una part important de Una pàgina web respon segons un esdeveniment ocorregut. Alguns esdeveniments són generats per l'usuari i d'altres són generats per API. En aquest article, veurem com es produeixen els esdeveniments i com s’utilitza el mètode addEventListener a JavaScript en la següent seqüència:
- Què és l'oient d'esdeveniments?
- AddEventListener () a JavaScript
- Valors de paràmetres
- AddEventListener a JavaScript: exemple
Què és l'oient d'esdeveniments?
Un oient d'esdeveniments és un procediment en JavaScript que espera que es produeixi un esdeveniment. El simple exemple d'un fitxer esdeveniment és un usuari que fa clic amb el ratolí o que prem una tecla del teclat.
El addEventListener () és un model incorporat Funció JavaScript que pren l'esdeveniment a escoltar i un segon argument que es crida cada vegada que es dispara l'acte descrit. Es pot afegir qualsevol nombre de gestors d'esdeveniments a un sol element sense sobreescriure els gestors d'esdeveniments existents.
addEventListener () a JavaScript
Alguns dels característiques del mètode d'oient d'esdeveniments inclouen:
- El addEventListener () el mètode adjunta un fitxer gestor d'esdeveniments a l'element especificat.
- Aquest mètode adjunta un controlador d'esdeveniments a un element sense sobreescriptura gestors d'esdeveniments existents.
- Podeu afegir molts gestors d'esdeveniments a un element.
- Podeu afegir molts gestors d'esdeveniments del mateix tipus a un element , és a dir, dos esdeveniments de 'clic'.
- Els oients d'esdeveniments es poden afegir a qualsevol JUDICI objecte no només elements HTML. és a dir, l’objecte finestra.
- El mètode addEventListener () ho fa més fàcil per controlar com l’esdeveniment reacciona a bombolles.
Quan s'utilitza el mètode addEventListener (), el JavaScript està separat del fitxer , per a una millor llegibilitat i us permet afegir oients d'esdeveniments fins i tot quan no controleu el marcador HTML.
A més, podeu eliminar fàcilment un oient d'esdeveniments mitjançant el fitxer mètode removeEventListener () .
Sintaxi:
target.addEventListener (tipus, listener [, opcions]) target.addEventListener (tipus, listener [, useCapture]) target.addEventListener (tipus, listener [, useCapture, wantsUntrusted])
Valors de paràmetres
| Paràmetre | Descripció |
esdeveniment | Obligatori. Una cadena que especifica el nom de l'esdeveniment. Nota: No utilitzeu el prefix “on”. Per exemple, utilitzeu 'clic' en lloc de 'onclick'. Per obtenir una llista de tots els esdeveniments HTML DOM, consulteu la nostra referència completa d'objectes d'esdeveniments HTML DOM. |
funció | Obligatori. Especifica la funció que cal executar quan es produeix l'esdeveniment. Quan es produeix l'esdeveniment, un objecte d'esdeveniment es passa a la funció com a primer paràmetre. El tipus d’esdeveniment objecte depèn de l'esdeveniment especificat. Per exemple, l'esdeveniment 'clic' pertany a l'objecte MouseEvent. |
useCapture | Opcional. Un valor booleà que especifica si l'esdeveniment s'ha d'executar a la fase de captura o de bombolles. Valors possibles: true - El controlador d'esdeveniments s'executa a la fase de capturafalse- Default. El gestor d'esdeveniments s'executa en la fase de bombolles |
Ara que ja sabeu com funciona un oient d’esdeveniments, vegem un exemple de l’addEventListener () a JavaScript.
addEventListener () a JavaScript: exemple
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt Aquest exemple utilitza el mètode addEventListener () per executar una funció quan un usuari fa clic en un botó. ('myBtn'). addEventListener ('click', myFunction) function myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
Amb això, arribem al final d’aquest addEventListener a JavaScript. Espero que hagueu entès com va escoltar l'esdeveniment mètode funciona en JavaScript.
Consulteu el nostre que inclou formació en viu dirigida per un instructor i experiència en projectes reals. Aquesta formació us permet dominar les habilitats necessàries per treballar amb tecnologies web front-end i front-end. Inclou formació sobre desenvolupament web, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
com cercar un personatge a Java
Tens alguna pregunta? Esmenteu-lo a la secció de comentaris del bloc 'addEventListener a JavaScript' i us respondrem.