Resumo : neste tutorial, você aprenderá sobre o changeevento JavaScript do texto de entrada, botão de opção, caixa de seleção e elementos de seleção.
O changeevento 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 onchangeatributo 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 changeevento 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 changeevento será acionado para mostrar o texto inserido.
Observe que se você quiser lidar com cada alteração do valor, use o inputevento.
Usando evento de alteração JavaScript para botões de opção
Um botão de opção dispara o changeevento após você selecioná-lo.
O exemplo a seguir mostra como lidar com o changeevento 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
changeevento do arquivobody. Quando um botão de opção é clicado, seuchangeevento é 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 changeevento 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 changeevento assim que a seleção for concluída.
O exemplo a seguir mostra como lidar com o changeevento do <select>elemento. O <p>elemento com o id resultexibirá 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 ochangeevento 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.
