// 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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lezione 7 Novembre</title>
    <script defer src="index.js"></script>
</head>
<style>

    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
    }

</style>
<body>

<br>
<br>
<button id="mio-bottone">Start</button>
<br>
<p id="mio-paragrafo">Clicca qui</p>
<br>
<br>
<div id="mio-div"></div>
</body>
</html>