6.1 Objeto do evento
JavaScript fornece um sistema de eventos poderoso, que permite monitorar várias ações do usuário e outros eventos que ocorrem no navegador. Um aspecto importante do trabalho com eventos é o objeto do evento, que contém informações sobre o evento e fornece métodos para sua manipulação.
Quando um evento ocorre, o navegador cria um objeto de evento que contém informações sobre esse evento. Este objeto é passado para o handler do evento como um argumento.
Propriedades do objeto do evento:
type: tipo de evento (por exemplo,click,keydown).target: elemento em que o evento ocorreu.currentTarget: elemento ao qual o handler do evento está anexado.eventPhase: fase em que o evento está (captura, alvo, propagação).bubbles: valor booleano indicando se o evento pode propagar.cancelable: valor booleano indicando se o evento pode ser cancelado.defaultPrevented: valor booleano indicando se a ação padrão foi prevenida.timeStamp: hora em que o evento foi criado.isTrusted: valor booleano indicando se o evento foi iniciado pelo usuário ou pelo script.
Métodos do objeto do evento:
preventDefault(): cancela a ação padrão associada ao evento.stopPropagation(): para a propagação do evento.stopImmediatePropagation(): para a propagação do evento e previne a execução de outros handlers de eventos para o elemento atual.
Exemplo de uso do objeto do evento:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Object Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Event type:', event.type); // Exibe: click
console.log('Event target:', event.target); // Exibe: <button id="myButton">Click me</button>
console.log('Current target:', event.currentTarget); // Exibe: <button id="myButton">Click me</button>
console.log('Event phase:', event.eventPhase); // Exibe: 2 (Fase de Alvo)
console.log('Bubbles:', event.bubbles); // Exibe: true
console.log('Cancelable:', event.cancelable); // Exibe: true
console.log('Time stamp:', event.timeStamp); // Exibe tempo em milissegundos
console.log('Is trusted:', event.isTrusted); // Exibe: true
});
</script>
</body>
</html>
6.2. Eventos de clique (Mouse Events)
Eventos de mouse são gerados quando o usuário interage com um elemento usando o mouse:
click: evento de cliquedblclick: evento de clique duplomousedown: evento de pressionar botão do mousemouseup: evento de soltar botão do mousemousemove: evento de movimento do mousemouseover: evento de passar o mousemouseout: evento de tirar o mouse
Exemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked');
console.log('Event type:', event.type);
console.log('Target element:', event.target);
});
</script>
</body>
</html>
6.3 Eventos de carregamento (Load Events)
Eventos de carregamento ocorrem quando um recurso termina de carregar:
load: evento que ocorre quando um recurso/página está completamente carregadoDOMContentLoaded: evento que ocorre quando o documento HTML inicial foi totalmente carregado e analisado sem esperar o carregamento completo de folhas de estilo, imagens e iframes
Exemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Load Events Example</title>
</head>
<body>
<script>
window.addEventListener('load', function(event) {
console.log('Window fully loaded');
});
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
});
</script>
</body>
</html>
6.4 Eventos de foco (Focus Events)
Eventos de foco são gerados quando um elemento recebe ou perde foco.
focus: evento que ocorre quando um elemento recebe focoblur: evento que ocorre quando um elemento perde foco
Exemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Focus Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('focus', function(event) {
console.log('Input field focused');
});
input.addEventListener('blur', function(event) {
console.log('Input field lost focus');
});
</script>
</body>
</html>
6.5 Eventos de teclado (Keyboard Events)
Eventos de teclado são gerados quando o usuário pressiona teclas no teclado:
keydown: evento que ocorre quando uma tecla é pressionadakeyup: evento que ocorre quando uma tecla é soltakeypress: evento que ocorre quando uma tecla é pressionada e solta (evento obsoleto, não recomendado para uso)
Exemplo:
HTML
<html>
<head>
<title>Keyboard Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('keydown', function(event) {
console.log('Key down:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Key up:', event.key);
});
</script>
</body>
</html>
GO TO FULL VERSION