short javascript event (and id selected)

by Juri Rudi

HTML

<p><b>Elenco puntato1</b></p>
<ol id="lista">
  <li>Sofferma il mouse qui</li>
</ol>
<button id="bottone1">Aggiungi voce</button>

<h2>Event Delegation:</h2>
<p><b>Elenco puntato2</b></p>
<ol id="lista2">
  <li>Sofferma il mouse qui</li>
</ol>
<button id="bottone2">Aggiungi voce</button>

CSS

button {
  width:150px;
}

JavaScript

document.querySelector('li').onmouseover = function() {
  document.querySelector("li").innerText ="Hai soffermato il mouse qui!"; // textContent
}
document.querySelector('li').onmouseout = NomeFunzione;

function NomeFunzione() {
  document.querySelector("li").innerText ="Sofferma il mouse qui";
}
document.getElementById('bottone1').onclick = function() {
  var Lista = document.getElementById('lista');
  var NuovoElemento = document.createElement('li');
  NuovoElemento.innerText = 'Nuova voce'; 
  Lista.insertBefore(NuovoElemento, Lista.lastChild);
}

//EVENT DELEGATION (https://goo.gl/2PHzi0)
document.getElementById('lista2').onmouseover = function(e) {
  if (e.target.tagName !== 'LI') return false;
  e.target.textContent ="Hai soffermato il mouse qui!";
}
document.getElementById('lista2').onmouseout = function(e) {
  if (e.target.tagName !== 'LI') return false;
  e.target.textContent ="Sofferma il mouse qui";
}
document.getElementById('bottone2').onclick = function() {
  var Lista2 = document.getElementById('lista2');
  var NuovoElemento = document.createElement('li');
  NuovoElemento.textContent = 'Nuova voce';
  Lista2.insertBefore(NuovoElemento, Lista2.lastChild);
}