Resumo : neste tutorial, você aprenderá sobre o change
evento JavaScript do texto de entrada, botão de opção, caixa de seleção e elementos de seleção.
O change
evento ocorre quando o elemento conclui a mudança.
Para anexar um manipulador de eventos ao evento change de um elemento, você pode chamar o addEventListener()
método:
element.addEventListener('change', function(){
// handle change
});
Linguagem de código: JavaScript ( javascript )
ou use o onchange
atributo do elemento. Por exemplo:
<input type="text" onchange="changeHandler()">
Linguagem de código: HTML, XML ( xml )
No entanto, é uma boa prática usar o addEventListener()
método.
Usando evento de alteração JavaScript para elementos de entrada
O evento change de um <input>
elemento é acionado quando o <input>
elemento perde o foco. O change
evento não dispara quando você está empatando.
O exemplo a seguir mostra o valor do texto de entrada quando ele perde o foco.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript change Event for Input Element</title>
</head>
<body>
<label for="message">Message:</label>
<input type="text" class="input" id="message" name="message">
<button>Submit</button>
<p id="result"></p>
<script>
let input = document.querySelector('.input');
let result = document.querySelector('#result');
input.addEventListener('change', function () {
result.textContent = this.value;
});
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Neste exemplo, se você digitar algum texto no <input>
elemento e mover o foco para o botão, o change
evento será acionado para mostrar o texto inserido.
Observe que se você quiser lidar com cada alteração do valor, use o input
evento.
Usando evento de alteração JavaScript para botões de opção
Um botão de opção dispara o change
evento após você selecioná-lo.
O exemplo a seguir mostra como lidar com o change
evento dos botões de opção:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript change Event for Radio Buttons</title>
</head>
<body>
<span>Status:</span>
<input type="radio" id="pending" name="status">
<label for="pending">Pending</label>
<input type="radio" id="resolved" name="status">
<label for="resolved">Resolved</label>
<input type="radio" id="rejected" name="status">
<label for="rejected">Rejected</label>
<p id="result"></p>
<script>
let result = document.querySelector('#result');
document.body.addEventListener('change', function (e) {
let target = e.target;
let message;
switch (target.id) {
case 'pending':
message = 'The Pending radio button changed';
break;
case 'resolved':
message = 'The Resolved radio button changed';
break;
case 'rejected':
message = 'The Rejected radio button changed';
break;
}
result.textContent = message;
});
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Como funciona:
- Primeiro, registre um manipulador de eventos no
change
evento do arquivobody
. Quando um botão de opção é clicado, seuchange
evento é transmitido ao corpo. Esta técnica é chamada de delegação de eventos . - Em seguida, mostre uma mensagem correspondente com base no botão de opção selecionado.
Usando evento de alteração JavaScript para caixas de seleção
Semelhante aos botões de opção, as caixas de seleção disparam o change
evento após a seleção, marcada ou desmarcada. Por exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript change Event for Checkboxes</title>
</head>
<body>
<label for="status">Web Technology:</label>
<input type="checkbox" id="html"> HTML
<input type="checkbox" id="css"> CSS
<input type="checkbox" id="js"> JavaScript
<p id="result"></p>
<script>
let result = document.querySelector('#result');
document.body.addEventListener('change', function (e) {
let target = e.target;
let message;
switch (target.id) {
case 'html':
message = 'The HTML checkbox changed';
break;
case 'css':
message = 'The CSS checkbox changed';
break;
case 'js':
message = 'The JavaScript checkbox changed';
break;
}
result.textContent = message;
});
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Usando evento de alteração JavaScript para o elemento selecionado
O <select>
elemento dispara o change
evento assim que a seleção for concluída.
O exemplo a seguir mostra como lidar com o change
evento do <select>
elemento. O <p>
elemento com o id result
exibirá o item selecionado:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript change Event for Select element</title>
</head>
<body>
<select id="lang">
<option value="">Select a language</option>
<option value="JavaScript">JavaScript</option>
<option value="TypeScript">TypeScript</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Java">Java</option>
</select>
<p id="result"></p>
<script>
let select = document.querySelector('#lang');
let result = document.querySelector('#result');
select.addEventListener('change', function () {
result.textContent = this.value;
});
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Como funciona:
- Primeiro, selecione o
<select>
elemento pelo seu id (lang
); - Em seguida, mostre o valor selecionado no
<p>
elemento.
Resumo
- O
<input>
elemento dispara ochange
evento quando perde o foco. - O botão de opção, a caixa de seleção e os elementos de seleção acionam o evento de alteração após serem selecionados.