JavaScript tiene eventos para proporcionar una interfaz dinámica a una página web. Estos eventos están vinculados a elementos en el modelo de objetos de documento (DOM). Estos eventos por defecto utilizan la propagación burbujeante, es decir, hacia arriba en el DOM de los niños a los padres. Podemos vincular eventos ya sea en línea o en un script externo. Hay múltiples eventos asociados con Javascript que incluyen onClick(), onChange(), onmouseleave(), onmouseout(), onmouseover(), onload, etc.
En este artículo, aprenderemos específicamente sobre el evento que ocurre cuando se agrega un valor en un cuadro de entrada en JavaScript.
Evento oninput(): El evento oninput() ocurre cuando se agrega un valor a un cuadro de entrada. Introducimos un valor mediante el teclado. Entonces podemos asociar ciertos eventos de teclado cuando se agrega un valor en un cuadro de entrada usando el teclado.
Estos eventos pueden incluir:
- onkeypress: cuando el usuario presiona una tecla que produce un valor de carácter.
- onkeyup: Cada vez que se suelta una tecla después de presionar.
- onkeydown: Cuando el usuario ha presionado la tecla. Ocurrirá incluso si la tecla presionada no produce un valor de carácter.
También podemos asociar eventos onChange cuando se agrega un valor en un cuadro de entrada usando el teclado.
- onChange: este evento detecta el cambio en el valor de cualquier elemento listado para este evento.
Ejemplo 1: a continuación se muestra un ejemplo que muestra el uso de estos eventos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG events</title>
</head>
<body id="GFG">
<form>
<label>Type Something</label>
<input type="text"
onChange=invokingOnChangeEvent()
oninput=invokingOnInputEvent()
onkeydown=invokingOnKeyDownEvent()
onkeyup=invokingOnKeyUpEvent()
onkeypress=invokingOnKeyPressEvent()>
</input>
</form>
<script>
function invokingOnInputEvent(event) {
console.log("onInput event occurred")
}
function invokingOnChangeEvent(event) {
console.log("onChange event occurred")
}
function invokingOnKeyPressEvent(event) {
console.log("onKeyPress event occurred")
}
function invokingOnKeyUpEvent(event) {
console.log("onKeyUp event occurred")
}
function invokingOnKeyDownEvent(event) {
console.log("onKeyDown event occurred")
}
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo cambiará el color de fondo en un evento que ocurra
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG events</title>
</head>
<body id="GFG">
<form>
<label> Type Something</label>
<input type="text"
onChange=invokingOnChangeEvent()
oninput=invokingOnInputEvent()
onkeydown=invokingOnKeyDownEvent()
onkeyup=invokingOnKeyUpEvent()
onkeypress=invokingOnKeyPressEvent()>
</input>
</form>
<script>
function invokingOnInputEvent(event) {
console.log("onInput event occurred")
document.getElementById("GFG")
.style.backgroundColor = 'red';
}
function invokingOnChangeEvent(event) {
console.log("onChange event occurred")
document.getElementById("GFG")
.style.backgroundColor = 'green';
}
function invokingOnKeyPressEvent(event) {
console.log("onKeyPress event occurred")
document.getElementById("GFG")
.style.backgroundColor = 'yellow';
}
function invokingOnKeyUpEvent(event) {
console.log("onKeyUp event occurred")
document.getElementById("GFG")
.style.backgroundColor = 'pink';
}
function invokingOnKeyDownEvent(event) {
console.log("onKeyDown event occurred")
document.getElementById("GFG")
.style.backgroundColor = 'orange';
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA