Come aggiungere un gestore di eventi all'oggetto finestra in JavaScript
Con l'aiuto del addEventListener () Metodo, un programmatore JavaScript può aggiungere gestori di eventi a un oggetto finestra specifico. Questo metodo consente di controllare la reazione per l'evento corrispondente. Il JavaScript è isolato dal testo HTML quando si utilizza il metodo AddeventListener (), rendendo facile da comprendere e consentendoti di aggiungere gli ascoltatori di eventi anche se non hai il controllo sul markup HTML.
Questo articolo discuterà la procedura per l'aggiunta di gestori di eventi all'oggetto finestra in un programma JavaScript. Inoltre, saranno dimostrati anche gli esempi relativi all'utilizzo del metodo AddeventListener (). Quindi iniziamo!
Aggiunta di gestori di eventi all'oggetto finestra in JavaScript
Come programmatore JavaScript, è possibile utilizzare il metodo AddeventListener () per l'aggiunta di un ascoltatore di eventi a qualsiasi oggetto HTML. Esiste un altro "SU"Proprietà JavaScript utilizzata per lo stesso scopo; Tuttavia, non è molto utile rispetto al metodo addEventListener () perché il metodo ADDEventListener () consente di aggiungere più ascoltatori di eventi su un oggetto finestra o elemento HTML.
Sintassi del metodo addEventListener ()
oggetto.addEventListener (evento, funzione, usecapture);Qui, il primo parametro, "evento"Viene aggiunto per specificare l'evento per il quale si desidera aggiungere il gestore degli eventi; Il secondo parametro, "funzione"Invoca la funzione che verrà eseguita quando si verifica l'evento specificato. L'ultimo parametro è facoltativo che può essere l'acquisizione o il gorgogliamento di eventi.
Esempio 1: aggiunta di un gestore di eventi all'oggetto finestra in JavaScript
Aggiungeremo il metodo AddeventListener () al "finestra"Oggetto nell'esempio seguente. Il metodo aggiunto addEventListener () verrà attivato quando un utente esegue il “mouseown"Azione:
JavaScript addEventListener ()
Questo esempio utilizza il metodo addEventListener () sull'oggetto della finestra.
Possiamo anche passare un "evento"Oggetto al metodo AddeventListener (). IL "evento"L'oggetto comprende tutte le informazioni relative all'evento del mouse:
Esegui il programma di cui sopra nel tuo editor di codice preferito o in qualsiasi sandbox di codifica online; Tuttavia, utilizzeremo il JSbin per questo scopo:
L'esecuzione del programma JavaScript di cui sopra mostrerà il seguente output:
Ora, clic sinistro sullo schermo e vedrai il seguente avviso:
Esempio 2: aggiunta di un gestore di eventi per il mouse fare clic su evento in javascript
Questo esempio mostrerà la procedura di aggiunta di un gestore di eventi per il mouse "clic"Evento in JavaScript. In questo esempio, non stiamo aggiungendo un evento direttamente all'oggetto della finestra ma al suo oggetto documento.
In primo luogo, aggiungeremo un'intestazione con il
tag, un paragrafo con il
tag e un pulsante utilizzando il tag:
Aggiungi un gestore di eventi in JavaScript
Questo programma JavaScript ha utilizzato il metodo AddeventListener ()
Abbiamo anche aggiunto un ID "Button1" per noi "Cliccami"Pulsante:
Il metodo getElementByID verrà invocato per trovare e ottenere il pulsante con "Button1" id. Dopodiché, il "addEventListener ()Il metodo "aggiungerà un"clic"Evento che attiverà il"DisplayDate ()" metodo:
Dopo aver ottenuto l'output, fai clic su "Cliccami"Pulsante per controllare l'ora e la data corrente:
Conclusione
Utilizzando il metodo AddeventListener (), è possibile aggiungere un gestore di eventi all'oggetto finestra e ad elementi HTML. Senza sovrascrivere i gestori di eventi esistenti, il metodo JavaScript di AdedEventListener () assegna un gestore di eventi all'oggetto specifico e un oggetto di finestra singola può avere anche più gestori di eventi. Questo articolo ha discusso della procedura per l'aggiunta di gestori di eventi all'oggetto finestra in un programma JavaScript e sono dimostrati anche gli esempi relativi all'utilizzo del metodo AddeventListener ().