addEventListener() (metodo/proprietà JavaScript) consente di intercettare l’evento di un certo oggetto (che può essere un elemento html, così come document o window) e quindi attivare la funzione stabilita. Gli eventi intercettabili sono gli stessi previsti dai corrispondenti attributi html, ma qui sono indicati senza il prefisso “on” (quindi, click anziché onclick, mouseover anziché onmouseover, ecc.). In alternativa al metodo in parola si possono direttamente utilizzare, come metodi JavaScript, gli eventi HTML (da indicarsi interamente in minuscolo), a quali segue l’assegnazione di una funzione anonima ([oggetto].[nomeevento]=function(){[codicefunzione]}) o nominativa ([oggetto].[nomeevento]=Nomefunzione;). Per rimuovere il listener (o handler) dell’evento, si usa il metodo .removeEventListener.
Sintassi
<script>
[oggetto].addEventListener("[NomeEvento]", [NomeFunzione]);
</script>
Esempi
Il codice che segue tratta anche il cd. event delegation.
<script>
document.getElementById('bottone1').onclick = NomeFunzione;
function NomeFunzione() {
var Lista = document.getElementById('lista');
var NuovoElemento = document.createElement('li');
NuovoElemento.innerText = 'Nuova voce'; // innerHTML
Lista.insertBefore(NuovoElemento, Lista.lastChild);
}
document.querySelector('li').onmouseover = function() {
document.querySelector("li").innerHTML ="Hai soffermato il mouse qui!";
}
document.querySelector('li').onmouseout = function() {
document.querySelector("li").innerHTML ="Sofferma il mouse qui";
}
</script>
<p><b>Elenco puntato:</b></p>
<ol id="lista">
<li class="li">Sofferma il mouse qui</li>
</ol>
<button id="bottone1">Aggiungi voce</button>
Contenuti correlati
- CSS
- HTML
- JavaScript
- jQuery
- PHP
- SQL
- WORDPRESS
0 Comment