addEventListener

by Juri Rudi

HTML

<p id="MioParagrafo1">Clicca qui</p>
<p id="MioParagrafo2">Clicca qui</p>
<p id="MioParagrafo3">Clicca qui</p>

<p id="MioParagrafo4">Sofferma il mouse qui</p>

<button id="bottone111">
Rimuovi ultimo EventListener
</button>

JavaScript

document.getElementById("MioParagrafo1").addEventListener("click", NomeFunzione1);
function NomeFunzione1() {
  document.getElementById("MioParagrafo1").innerHTML ="Hai cliccato!";
}

document.getElementById("MioParagrafo2").addEventListener("click", function() { document.getElementById("MioParagrafo2").innerHTML ="Hai cliccato!"; });

document.getElementById("MioParagrafo3").addEventListener("click", NomeFunzione2);
document.getElementById("MioParagrafo3").addEventListener("click", NomeFunzione3);
function NomeFunzione2() {
  document.getElementById("MioParagrafo2").innerHTML ="Hai cliccato!";
}
function NomeFunzione3() {
  document.getElementById("MioParagrafo3").innerHTML ="Hai cliccato!";
}

document.getElementById("MioParagrafo4").addEventListener("mouseover", NomeFunzione4);
function NomeFunzione4() {
  document.getElementById("MioParagrafo4").innerHTML ="Hai soffermato il mouse qui!";
}
document.getElementById("MioParagrafo4").addEventListener("mouseout", NomeFunzione5);
function NomeFunzione5() {
  document.getElementById("MioParagrafo4").innerHTML ="Sofferma il mouse qui";
}

var bottone111 = document.getElementById('bottone111').addEventListener("click", NomeFunzione6);
function NomeFunzione6() {
  document.getElementById("MioParagrafo4").removeEventListener("mouseover", NomeFunzione4);
  document.getElementById("MioParagrafo4").removeEventListener("mouseout", NomeFunzione5);
}