addEventListener() gestione degli Eventi con Javascript

addEventListener è un oggetto che indica l'evento che è stato innescato, come ad esempio un pulsante premuto, una combinazioni di tasti, un pulsante cliccato etc...

Sintassi di addEventListener in Javascript

Eventi più comuni nei form

• .addEventListener( eventToWatch, functionToCall );
• .removeEventListener( eventToWatch, functionToCall );
• .dispatchEvent( eventToWatch, functionToCall ); - Attiva il gestore dell'evento come se l'evento si fosse verificato

Eventi generali

• click - Attivato se l'elemento viene cliccato con il mouse. Utile per menu, pulsanti, ecc
• load - Attivato quando l'elemento è stato caricato (es: immagine, video, file)
• focus - Attivato se l'elemento ottiene il focus (ottiene il cursore)
• submit - Attivato se viene attivato l'elemento <input type="submit">

Disponibile in generale, ma particolarmente utile per canvas:

• keydown - - event.key e event.keyCode contengono la chiave inattiva.
• keypress - event.key e event.keyCode contengono il tasto che è stato premuto.
• keyup - event.key e event.keyCode contengono la chiave che è stata rilasciata.
• mouseover - event.pos contiene i coordinatori x,y del mouse.
• mousemove - event.pos contiene i coordinatori x,y del mouse.
• mousedown - event.pos contiene i coordinatori x,y del mouse, event.button contiene il pulsante che è stato premuto.
• mouseup - event.pos contiene i coordinatori x,y del mouse

document.addEventListener(event, function, Capture)

// Esempio click : 
document.addEventListener('click', function(), Capture (optional))
// Esempio load : 
document.addEventListener('load', function(), Capture (optional))
// Esempio focus : 
document.addEventListener('focus', function(), Capture (optional))
// Esempio submit : 
document.addEventListener('submit', function(), Capture (optional))

//Esempio keydown
document.querySelector('input').addEventListener('keydown', function);
//Esempio keypress (deprecato)
document.querySelector('input').addEventListener('keydown', function);
//Esempio keyup
document.querySelector('input').addEventListener('keydown', function);
//Esempio mouseover
document.getElementById("test").addEventListener("mouseover",function);
//Esempio mousemove
document.getElementById("test").addEventListener("mousemove",function);
//Esempio mousedown
document.getElementById("test").addEventListener("mousedown",function);
//Esempio mouseup
document.getElementById("test").addEventListener("mouseup",function);

Codice della lezione: addEventListener in Javascript

// Selettore con querySelectorAll tramite ID
let selBottone = document.querySelectorAll('#button2');
let selId1 = document.getElementById('txtID1');
let selId2 = document.getElementById('txtID2');

// Ciclo for...of per iterare sugli elementi con 
for(elementi of selBottone){
    elementi.addEventListener('mouseover',function(){
        selId1.innerHTML = 'Il mouse è posizionato sul pulsante';
        selId1.style.fontSize = "x-large";
    })
    elementi.addEventListener('mouseout',function(){
        selId1.innerHTML = 'Il mouse non è più posizionato sul pulsante';
        selId1.style.fontSize = "x-large";
    })
    elementi.addEventListener('click',function(){
        selId1.innerHTML = 'Il mouse ha cliccato sul pulsante';
        selId1.style.fontSize = "x-large";
    })
};

// Selettore con getElementById ed evento al click
document.getElementById('button1').onclick = function(){
    selId2.innerHTML = 'Il mouse ha cliccato sul pulsante'; ;
};