Manipulação de Eventos em JavaScript
Este artigo explica a manipulação de eventos em JavaScript.
YouTube Video
javascript-html-event.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 1em;
14 padding-bottom: 10em;
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 background-color: #f7f9fc;
17 color: #333;
18 line-height: 1.6;
19 }
20
21 .container {
22 max-width: 800px;
23 margin: 0 auto;
24 padding: 1em;
25 background-color: #ffffff;
26 border: 1px solid #ccc;
27 border-radius: 10px;
28 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
29 }
30
31 .container-flex {
32 display: flex;
33 flex-wrap: wrap;
34 gap: 2em;
35 max-width: 1000px;
36 margin: 0 auto;
37 padding: 1em;
38 background-color: #ffffff;
39 border: 1px solid #ccc;
40 border-radius: 10px;
41 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
42 }
43
44 .left-column, .right-column {
45 flex: 1 1 200px;
46 min-width: 200px;
47 }
48
49 h1, h2 {
50 font-size: 1.2rem;
51 color: #007bff;
52 margin-top: 0.5em;
53 margin-bottom: 0.5em;
54 border-left: 5px solid #007bff;
55 padding-left: 0.6em;
56 background-color: #e9f2ff;
57 }
58
59 button {
60 display: block;
61 margin: 1em auto;
62 padding: 0.75em 1.5em;
63 font-size: 1rem;
64 background-color: #007bff;
65 color: white;
66 border: none;
67 border-radius: 6px;
68 cursor: pointer;
69 transition: background-color 0.3s ease;
70 }
71
72 button:hover {
73 background-color: #0056b3;
74 }
75
76 #output {
77 margin-top: 1em;
78 background-color: #1e1e1e;
79 color: #0f0;
80 padding: 1em;
81 border-radius: 8px;
82 min-height: 200px;
83 font-family: Consolas, monospace;
84 font-size: 0.95rem;
85 overflow-y: auto;
86 white-space: pre-wrap;
87 }
88
89 .highlight {
90 outline: 3px solid #ffc107; /* yellow border */
91 background-color: #fff8e1; /* soft yellow background */
92 transition: background-color 0.3s ease, outline 0.3s ease;
93 }
94
95 .active {
96 background-color: #28a745; /* green background */
97 color: #fff;
98 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
99 transition: background-color 0.3s ease, box-shadow 0.3s ease;
100 }
101 </style>
102</head>
103<body>
104 <div class="container-flex">
105 <div class="left-column">
106 <h2>HTML Sample</h2>
107 <div id="parentDiv">
108 <button id="myButton">Click me</button>
109 </div>
110 </div>
111
112 <div class="right-column">
113 <h2>Form Sample</h2>
114 <form id="myForm">
115 <input type="text" name="username">
116 <button type="submit">Submit</button>
117 </form>
118 </div>
119 </div>
120
121 <div class="container">
122 <h1>JavaScript Console</h1>
123 <button id="executeBtn">Execute</button>
124 <div id="output"></div>
125 </div>
126
127 <script>
128 // Override console.log to display messages in the #output element
129 (function () {
130 const originalLog = console.log;
131 console.log = function (...args) {
132 originalLog.apply(console, args);
133 const output = document.getElementById('output');
134 output.textContent += args.map(String).join(' ') + '\n';
135 };
136 })();
137
138 document.getElementById('executeBtn').addEventListener('click', () => {
139 // Prevent multiple loads
140 if (document.getElementById('externalScript')) return;
141
142 const script = document.createElement('script');
143 script.src = 'javascript-html-event.js';
144 script.id = 'externalScript';
145 //script.onload = () => console.log('javascript-html-event.js loaded and executed.');
146 //script.onerror = () => console.log('Failed to load javascript-html-event.js.');
147 document.body.appendChild(script);
148 });
149 </script>
150</body>
151</html>Manipulação de Eventos em JavaScript
A manipulação de eventos em JavaScript é um mecanismo para executar ações específicas em resposta a operações do usuário (como cliques e entradas no teclado) ou ações do navegador. Ao configurar ouvintes de eventos, você pode criar páginas da web dinâmicas e interativas.
Noções Básicas sobre Eventos
Eventos ocorrem em resposta a operações do usuário e ações do navegador. Quando um evento ocorre, o manipulador de eventos associado (função) é executado. Por exemplo, há eventos como os seguintes:.
- Clique (
click) - Entrada de Teclado (
keydown,keyup) - Movimento do Mouse (
mousemove,mouseover) - Envio de Formulário (
submit) - Carregamento da Página Concluído (
DOMContentLoaded) - Rolagem (
scroll)
Adicionando Ouvintes de Eventos
Ouvintes de eventos são configurados usando o método addEventListener(). Este método chama uma função específica quando o evento especificado ocorre.
Sintaxe Básica de addEventListener()
1element.addEventListener(event, handler);elementé o elemento HTML que monitora o evento.eventé o nome do evento (por exemplo,click).handleré a função que é executada quando o evento ocorre.
Objeto de Evento
Quando um evento ocorre, o JavaScript passa um objeto de evento contendo os detalhes do evento para o manipulador de eventos. Esse objeto inclui informações como qual elemento acionou o evento e qual tecla foi pressionada.
Exemplo: Usando o Objeto de Evento
1<button id="myButton">Click me</button>1const button = document.getElementById('myButton');
2
3button.addEventListener('click', (event) => {
4 console.log(event); // Display event details in the console
5 console.log('Clicked element:', event.target); // Display the clicked element
6});- Este código usa o objeto de evento para exibir informações detalhadas e o elemento clicado no console quando o botão é clicado.
Eventos Típicos
Evento de Clique
O evento click ocorre quando o usuário clica em um elemento.
1element.addEventListener('click', () => {
2 console.log('Clicked');
3});- Este código exibe uma mensagem no console quando o elemento é clicado.
Eventos de Teclado
Os eventos keydown e keyup ocorrem quando o usuário pressiona ou solta uma tecla. Você pode usar event.key para ver qual tecla foi pressionada.
1document.addEventListener('keydown', (event) => {
2 console.log(`Key pressed: ${event.key}`);
3});- Este código exibe o nome da tecla no console quando o usuário pressiona uma tecla.
Eventos de Mouse
Os eventos mousemove e mouseover ocorrem durante o movimento ou sobreposição do mouse.
1document.addEventListener('mousemove', (event) => {
2 console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});- Este código exibe a posição (coordenadas X e Y) no console toda vez que o mouse se move.
Eventos de Formulário
Os eventos relacionados a formulários incluem submit e input. O evento submit ocorre quando um formulário é enviado e geralmente causa o recarregamento da página, mas event.preventDefault() é frequentemente usado para evitar isso.
Exemplo: Evitando o recarregamento da página ao enviar um formulário
1<form id="myForm">
2 <input type="text" name="username">
3 <button type="submit">Submit</button>
4</form>1const form = document.getElementById('myForm');
2
3form.addEventListener('submit', (event) => {
4 event.preventDefault(); // Prevent page reload
5 console.log('Form has been submitted');
6});- Este código impede que a página seja recarregada quando o formulário é enviado e exibe uma mensagem no console em vez disso.
Propagação de Eventos (Borbulhamento e Captura)
Os eventos propagam por duas fases: a fase de captura, que viaja dos elementos pais para os elementos filhos, e a fase de borbulhamento, que viaja dos elementos filhos para os elementos pais.
Borbulhamento de Eventos
Por padrão, os eventos ocorrem no elemento mais interno e se propagam para fora. Isso é chamado de borbulhamento.
Exemplo: Exemplo de Borbulhamento
1<div id="parentDiv">
2 <button id="myButton">Click me</button>
3</div> 1const parent = document.getElementById('parentDiv');
2const button = document.getElementById('myButton');
3
4parent.addEventListener('click', () => {
5 console.log('Parent element was clicked');
6});
7
8button.addEventListener('click', () => {
9 console.log('Button was clicked');
10});- Neste exemplo, quando você clica em um botão, o evento do botão ocorre primeiro, seguido pelo evento do elemento pai.
Captura de Eventos
Ao especificar true como o terceiro argumento em addEventListener(), você pode lidar com eventos na fase de captura.
1parent.addEventListener('click', () => {
2 console.log('Capturing: Parent element was clicked');
3}, true);- Este código lida com o evento de clique do elemento pai na fase de captura e exibe uma mensagem no console.
Evitando a Propagação com stopPropagation()
Você pode impedir a propagação de eventos usando event.stopPropagation().
1button.addEventListener('click', (event) => {
2 event.stopPropagation(); // Stop the event propagation
3 console.log('Button was clicked (no propagation)');
4});- Este código impede que o evento se propague quando o botão é clicado e exibe uma mensagem no console.
Removendo Eventos
Você pode remover ouvintes de eventos usando removeEventListener(). Para remover um ouvinte de evento, você precisa de uma referência à função especificada no addEventListener().
1function handleClick() {
2 console.log('Clicked');
3}
4
5const button = document.getElementById('myButton');
6button.addEventListener('click', handleClick);
7button.removeEventListener('click', handleClick); // Remove the event listener
- Este código remove o ouvinte de evento de clique do botão para que ele não seja mais tratado quando clicado.
Eventos Personalizados
No JavaScript, você pode criar e disparar eventos personalizados além dos eventos padrão. Use o construtor CustomEvent.
1document.addEventListener('myCustomEvent', (event) => {
2 console.log(event.detail.message); // Displays "Hello!"
3});
4
5const event = new CustomEvent('myCustomEvent', {
6 detail: {
7 message: 'Hello!'
8 }
9});
10document.dispatchEvent(event);- Este código cria e dispara um evento personalizado
myCustomEvent, e exibe seus detalhes no console.
Resumo
O tratamento de eventos é um elemento essencial para aprimorar a interatividade das aplicações web. Ao utilizar os componentes de tratamento de eventos, você pode proporcionar uma experiência do usuário mais flexível e sofisticada.
- Ouvinte de Evento: Use
addEventListener()para definir um manipulador de eventos em um elemento. - Objeto de Evento: Quando um evento ocorre, um objeto de evento é passado, e ele pode ser usado para obter informações detalhadas.
- Propagação de Evento: Os eventos se propagam em duas fases: propagação por borbulhamento e captura.
- Eventos de Formulário e Eventos Personalizados: Você pode gerenciar envios de formulário e seus próprios eventos personalizados.
Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.