Ejemplo eventos

	<div class="container ">
		<img src="img/gato1.jpg" id="gato" width="300">
		<div class="form-group">
			<label for="cadena">Nombre:</label>
			<input type="text" class="form-control" id="cadena">
		</div>

		<h1 id="texto">Esto es un texto</h1>
		<button type="button" class="btn btn-success" id="anadir">Añadir</button>
		<button type="button" class="btn btn-success" id="contar">Contar</button>

		<script src="js/test.js"></script>
	</div>

// Cuando tengamos el ratón encima de la imagen pon el gato2
document.getElementById('gato').addEventListener('mouseenter', ponGato)
// Cuando tengamos el ratón fuera de la imagen pon el gato1
document.getElementById('gato').addEventListener('mouseleave', ponGato2)

function ponGato () {
  document.getElementById('gato').src = 'img/gato2.jpg'
}
function ponGato2 () {
  document.getElementById('gato').src = 'img/gato1.jpg'
}

document.getElementById('cadena').addEventListener('change', invertir)

function invertir () {
  let cadena = document.getElementById('cadena').value
  cadena = cadena.split('').reverse().join('')
  document.getElementById('texto').innerHTML = cadena
}

document.getElementById('anadir').addEventListener('click', anadir)

function anadir () {
  const cadena = document.getElementById('cadena').value
  document.getElementById('texto').innerHTML += cadena
}

document.getElementById('contar').addEventListener('dblclick', contar)

function contar () {
  const cadena = document.getElementById('cadena').value
  document.getElementById('texto').innerHTML = cadena.length
}