JavaScript - Eventos DOM

Introdução

Os eventos DOM são um conjunto de ações que podem afetar e modificar o DOM de uma página. Os eventos DOM são executados quando alguma interação com o site ocorre, e estes possuem a capacidade de chamar [[Funções]] e executá-las, podendo assim mudar o conteúdo do próprio site

Exemplos de Eventos

O exemplo abaixo mostra três eventos relacionados à div que tem o id=area:

onclick: Executa a função clicar()

onmouseenter: Executa a função entrar()

onmouseout: Executa a função sair()

Eventos Disparados Por HTML

<body>
	<div id='area' onclick='clicar()' onmouseenter='entrar()' onmouseout='sair()'> <!--Os exentos são disparados aqui-->
		Clique aqui para interagir.
	</div>
	<script>
		var a = window.document.querySelector('div#area')
		function clicar() {
			a.innerHTML = 'Clicou!'
		}
		function entrar() {
			a.innerHTML = 'Mouse Entrou!'
		}
		function sair() {
			a.innerHTML = 'Mouse Saiu!'
		}
	</script>
</body>

Eventos Disparados Por JavaScript

<body>
	<div id='area'>
		Clique aqui para interagir.
	</div>
	<script>
		var a = window.document.querySelector('div#area')
		a.addEventListener('click', clicar) // Irá disparar quando ocorrer o clique do mouse
		a.addEventListener('mouseenter', entrar) // Irá disparar quando o mouse entrar no elemento
		a.addEventListener('mouseout', sair) // Irá disparar quando o mouse sair do elemento
		
		function clicar() {
			a.innerHTML = 'Clicou!'
		}
		function entrar() {
			a.innerHTML = 'Mouse Entrou!'
		}
		function sair() {
			a.innerHTML = 'Mouse Saiu!'
		}
	</script>
</body>