Cambio de valor de entrada de JavaScript
Este breve tutorial discutirá la utilización de addEventListener en JavaScript.
el evento input en JavaScript
El evento input está asociado con los siguientes tipos de elementos HTML.
- Tipo de entrada: campos de texto, radio y casilla de verificación
- Tipo de área de texto
- Desplegable o Seleccionar tipo
Cada vez que cambie un valor de dicho elemento, se activará el evento de entrada. Hay una diferencia significativa entre los eventos de entrada y cambio, donde el evento de entrada se activa cada vez que cambia el valor del elemento, pero el evento de cambio solo se activará si el elemento pierde su foco.
Además, la interfaz de eventos asociada con los elementos del área de entrada y texto es el InputEvenet. Para los otros tipos de elementos, sería la interfaz genérica Evento.
el evento de entrada con el detector de eventos de JavaScript
Tras la interacción del usuario, se puede disparar un evento en el objetivo. La API web permite registrar detectores de eventos en los que se llamará a una función cuando se active un evento específico en un elemento de destino.
La siguiente es la sintaxis básica para registrar un detector de eventos para un evento de tipo entrada.
Sintaxis:
addEventListener(event_type, listener);
El parámetro event_type es el tipo de evento como una representación de cadena. En este escenario, el tipo de evento sería la entrada.
El oyente es la función de JavaScript que se invoca cuando se activa un evento. Esta función u objeto recibe una notificación inmediatamente cuando se activa el evento especificado.
Vamos a crear una página HTML simple con elementos de entrada y párrafo, como se muestra a continuación.
Código - HTML:
<html>
<head>
</head>
<body>
<input placeholder="your name" name="name"/>
<p id="nameList"></p>
<script type="text/javascript" src="inputev.js"></script>
</body>
</html>
También hemos vinculado el archivo JavaScript inputev.js a la página HTML. Usemos la lógica de JavaScript para registrar un detector de eventos para el elemento de entrada.
Código - inputev.js:
// make the link to the element objects
const inputField = document.querySelector('input');
const displayAreaField = document.getElementById('nameList');
// adding the event listener for input event type
inputField.addEventListener('input', addNames);
// addNames is the function to be called
function addNames(inputevent) {
displayAreaField.textContent = inputevent.target.value;
}
Según el ejemplo anterior, registramos un detector de eventos para el campo de entrada y pasamos la función a la que se llamará cuando se active un evento. En este caso, la función de devolución de llamada es addNames.
Cuando ejecuta el código de ejemplo, las letras escritas aparecen debajo del campo de texto.
El evento de entrada mencionado y las técnicas de escucha de eventos son características útiles que ofrece la API web en aplicaciones altamente interactivas.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.