Un evento è una parte importante di Una pagina web risponde in base a un evento che si è verificato. Alcuni eventi sono generati dagli utenti e alcuni sono generati dalle API. In questo articolo vedremo come si verificano gli eventi e come viene utilizzato il metodo addEventListener in JavaScript nella seguente sequenza:
- Cos'è l'Event Listener?
- AddEventListener () in JavaScript
- Valori dei parametri
- AddEventListener in JavaScript: Esempio
Cos'è l'Event Listener?
Un listener di eventi è una procedura in JavaScript che attende il verificarsi di un evento. Il semplice esempio di un file evento è un utente che fa clic con il mouse o preme un tasto sulla tastiera.
Il addEventListener () è un integrato Funzione JavaScript che accetta l'evento da ascoltare e un secondo argomento da chiamare ogni volta che l'evento descritto viene attivato. Qualsiasi numero di gestori di eventi può essere aggiunto a un singolo elemento senza sovrascrivere i gestori di eventi esistenti.
addEventListener () in JavaScript
Alcuni dei Caratteristiche del metodo listener di eventi include:
- Il addEventListener () metodo allega un file gestore di eventi all'elemento specificato.
- Questo metodo collega un gestore di eventi a un elemento senza sovrascrittura gestori di eventi esistenti.
- Puoi aggiungere molti gestori di eventi a un elemento.
- Puoi aggiungere molti gestori di eventi di stesso tipo a uno elemento , ovvero due eventi di 'clic'.
- I listener di eventi possono essere aggiunti a qualsiasi file GIUDIZIO oggetto non solo elementi HTML. cioè l'oggetto finestra.
- Il metodo addEventListener () lo fa Più facile per controllare come il file l'evento reagisce spumeggiante.
Quando si utilizza il metodo addEventListener (), JavaScript è separato dal file markup, per una migliore leggibilità e consente di aggiungere listener di eventi anche quando non si controlla il markup HTML.
Inoltre, puoi rimuovere facilmente un listener di eventi utilizzando il file metodo removeEventListener () .
Sintassi:
target.addEventListener (type, listener [, options]) target.addEventListener (type, listener [, useCapture]) target.addEventListener (type, listener [, useCapture, wantsUntrusted])
Valori dei parametri
| Parametro | Descrizione |
evento | Necessario. Una stringa che specifica il nome dell'evento. Nota: non utilizzare il prefisso 'on'. Ad esempio, utilizza 'clic' invece di 'onclick'. Per un elenco di tutti gli eventi HTML DOM, guarda il nostro completo riferimento all'oggetto evento HTML DOM. |
funzione | Necessario. Specifica la funzione da eseguire quando si verifica l'evento. Quando si verifica l'evento, un oggetto evento viene passato alla funzione come primo parametro. Il tipo di evento oggetto dipende dall'evento specificato. Ad esempio, l'evento 'click' appartiene all'oggetto MouseEvent. |
useCapture | Opzionale. Un valore booleano che specifica se l'evento deve essere eseguito nella fase di acquisizione o di bubbling. Valori possibili: true - Il gestore eventi viene eseguito nella fase di acquisizione false- Default. Il gestore di eventi viene eseguito nella fase di bubbling |
Ora che sai come funziona un listener di eventi, diamo un'occhiata a un esempio di addEventListener () in JavaScript.
addEventListener () in JavaScript: Esempio
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gtQuesto esempio utilizza il metodo addEventListener () per eseguire una funzione quando un utente fa clic su un pulsante. & lt / p & gt & ltbutton id = 'myBtn' & gtProva 'demo & lt / button & gt ('myBtn'). addEventListener ('click', myFunction) function myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
Con questo, arriviamo alla fine di questo addEventListener in JavaScript. Spero tu abbia capito come l'ascoltatore dell'evento metodo funziona in JavaScript.
Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
ruby on rails mercato del lavoro
Hai domande per noi? Si prega di menzionarlo nella sezione commenti del blog 'addEventListener in JavaScript' e ti risponderemo.