// Javascript


let mioBottone = document.getElementById("mio-bottone");
let mioDiv = document.getElementById("mio-div");
let mioParagrafo = document.getElementById("mio-paragrafo");

mioParagrafo.addEventListener("click", gestioneEventi);
mioBottone.addEventListener("click", gestioneEventi);
// mioBottone.addEventListener("mouseover", eventoBottone);
// mioBottone.addEventListener("mouseout", eventoBottone);

function stampaNelDiv(ilDiv, testoDaScrivereNelDiv) {
    ilDiv.innerHTML = testoDaScrivereNelDiv;
}

function gestioneEventi(mioEvento) {

    mioDiv.style.color = "";
    let tipoEvento = mioEvento.type;
    let elementoDellEvento = mioEvento.target;

    if (tipoEvento === "click") {
        if (elementoDellEvento.id === "mio-paragrafo") {
            // e' stato il paragrafo!
            stampaNelDiv(mioDiv, "Hai cliccato sul paragrafo con id = " + elementoDellEvento.id)
            // mioDiv.innerHTML = "Hai cliccato sul paragrafo con id = " + elementoDellEvento.id;
        } else if (elementoDellEvento.id === "mio-bottone") {
            // e' stato il bottone!
            mioDiv.innerHTML = "Hai cliccato sul bottone con id = " + elementoDellEvento.id;
        } else {
            // non so chi sia stato! :-(
            mioDiv.innerHTML = "Non so quale elemento abbia attivato l'evento click!";
        }
    } else if (tipoEvento === "mouseover" || tipoEvento === "mouseout") {
        mioDiv.innerHTML = tipoEvento;
    } else {
        mioDiv.innerHTML = "Evento sconosciuto";
        mioDiv.style.color = "red";
    }

    // document.getElementById("mio-div").innerHTML = tipoEvento;
}


// HTML




    
    
    
    








Start


Clicca qui