JavaScript - Eventos DOM
JavaScript - Eventos DOM
Assuntos: JavaScript - 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 oid=area
:
onclick
: Executa a funçãoclicar()
onmouseenter
: Executa a funçãoentrar()
onmouseout
: Executa a funçãosair()
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>