Eventos (Events) de JavaScript

Los eventos son operaciones que ocurren en el navegador, que pueden ser iniciadas por el usuario o por el propio navegador.

A continuación, se presentan algunos ejemplos comunes de eventos que pueden ocurrir en un sitio web:

• La página se ha cargado completamente

• El usuario hace clic en un botón

• El usuario desplaza el documento

• El usuario ajusta el tamaño del navegador

• El usuario mueve el ratón

• El usuario envía el formulario

• El usuario presiona una tecla en el teclado

• El campo de entrada HTML se ha cambiado

Cada evento disponible tienegestor de eventos，elgestor de eventosEs un bloque de código (generalmente una función JavaScript definida por el usuario) que se ejecuta cuando se desencadena un evento.

Al comprender los eventos, podrá proporcionar a los usuarios finales una experiencia web más interactiva.

Un ejemplo simple

Cuando se desencadena un evento, por ejemplo, cuando el usuario hace clic en un botón, se puede ejecutar un bloque de código JavaScript.

En el siguiente ejemplo, tenemos un botón que, al presionarlo, llamashowDate()Función:

<button onclick="showDate()">Haga clic en mí</button>

JavaScript showDate()La función se muestra como sigue:

<script>
function showDate() {
　　　document.getElementById("output").innerHTML = new Date();
}
</script>

Maneras de usar eventos

Se pueden asignar eventos a los elementos de tres maneras para que se ejecuten cuando se desencadenen eventos relacionados:

• Programador de eventos en línea

• Propiedad del administrador de eventos

• Escucha de eventos

Vamos a presentar todos los tres métodos para asegurarnos de que esté familiarizado con cada manera de desencadenar eventos.

Atributo de programador de eventos en línea

Para asignar eventos a elementos HTML, podemos usarAtributos de eventos HTML.

En el siguiente ejemplo, cuando el usuario hace clic en<p>El contenido del elemento se cambiará cuando se haga clic en él:

<p onclick="this.innerHTML = 'Hello world'">Haga clic aquí para cambiar este texto</p>

En el siguiente ejemplo, cuando el usuario hace clic en<p>Se llama a una función cuando se hace clic en el elemento:

<p onclick="changeText(this)">Haga clic aquí para cambiar este texto</p>
<script>
function changeText(self) {
　　　self.innerHTML = "Hello world";
}
</script>

En el siguiente ejemplo, tenemos un botón, al hacer clic en él se cambiará el fondo a un color aleatorio:

<button onclick="bgChange()">Click me</button>
<script>
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　","　+　random(255)　+　","　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}
</script>

El administrador de eventos en línea es una manera sencilla de comenzar a entender los eventos, pero generalmente no se debe usar fuera de fines de prueba y educación.

Propiedad del administrador de eventos

El siguiente paso del administrador de eventos en línea esPropiedad del administrador de eventos. Esto es muy similar a un administrador de eventos en línea, excepto que configuramos las propiedades del elemento en JavaScript en lugar de las propiedades del HTML.

En el siguiente ejemplo, asignaremos el evento onclick al elemento HTML con id "para":

let para = document.querySelector("#para");
para.onclick = function() {
　　　this.innerHTML = "Hello world";
}

También podemos establecer la propiedad del administrador de eventos en igual a el nombre de la función nombrada:

let para = document.querySelector("#para");
para.onclick = changeText;
function changeText() {
　　　para.innerHTML = "Hello world";
}

En el ejemplo anterior, se asignará el nombrechangeTextLa función se asigna a la que tieneid="para"del elemento HTML.

Se ejecutará esta función al hacer clic en este elemento.

En el siguiente ejemplo, tenemos un botón, al hacer clic en él se cambiará el fondo a un color aleatorio:

let btn = document.querySelector("button");
btn.onclick = bgChange;
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　","　+　random(255)　+　","　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}

Nota:gestor de eventosno sigueLa convención de nombres camelCase que follows la mayoría del código JavaScript. Nota, el código esonclick, no esonClick.

Eventos onfocus y onblur

onfocus se desencadena cuando el elemento recibe el enfoque.

onblur se desencadena cuando el elemento pierde el enfoque.

<input type="text" onfocus="func1(this)" onblur="func2(this)"

Evento onchange

onchange se desencadena cuando cambia el valor del elemento.

<input type="text" onchange="myFunc(this)" value="Hello">

Eventos onmouseover y onmouseout

onmouseover se desencadena cuando el dispositivo de puntero (generalmente el ratón) se mueve sobre el elemento o uno de sus elementos hijos.

onmouseout se desencadena cuando el dispositivo de puntero (generalmente el ratón) se desplaza fuera del elemento o uno de sus elementos hijos.

Leer más

Referencia de HTML:Referencia de atributos de eventos de HTML

Referencia de JavaScript:Referencia de objeto de evento de HTML DOM