Tutorial de eventos de JavaScript

Estamos obteniendo una buena base sobre lo que es JavaScript hasta ahora con nuestro estudio de la sintaxis básica, los tipos, los objetos y el modelo de objetos de documento. Donde las cosas comienzan a ponerse más interesantes es cuando comenzamos a trabajar con eventos. JavaScript es perfecto para tratar con un estilo de programación impulsado por eventos. Aprender a usar jQuery Event Handling también es un gran enfoque para lidiar con eventos de JavaScript, pero es importante conocer la tecnología subyacente. Con este enfoque, podemos hacer cosas increíbles con JavaScript, ¡así que entremos de inmediato!

Eventos y oyentes

Tener la capacidad de reaccionar a lo que hace el usuario es uno de los principales beneficios de los eventos y los oyentes. Quizás queremos tomar una acción cuando un usuario hace clic en un enlace determinado, o completa un campo de formulario en particular, o simplemente mueve el mouse a una ubicación diferente. Todas estas cosas están desencadenando eventos en nombre del usuario y podemos escribir código para manejarlos.

¿Qué es un evento?

Los eventos de JavaScript son acciones que ocurren por sí solas. Los eventos están sucediendo todo el tiempo, JavaScript simplemente escucha los que usted especifique y luego puede tomar alguna acción. Por ejemplo, todos los siguientes son eventos

Cuando se carga la página
Cuando un usuario mueve su mouse
Cuando el usuario hace clic en un botón
Cuando el usuario se desplaza por la página
Cuando el usuario hace clic en un campo de formulario
Cada pulsación de tecla es un evento
¡Los eventos están sucediendo en todo momento!

Eres tú, el programador, quien decidirá sobre cuáles quieres tomar medidas. Los eventos están integrados directamente en JavaScript y hay palabras clave que los describen. Están en minúsculas y por lo general comienzan con on. Por ejemplo, todos estos son eventos de JavaScript:

onload
onclick
onmouseover
onblur
onfocus

Nosotros, como programadores, no escribimos el evento en sí, escribimos el controlador de eventos . Básicamente, escribimos una función de JavaScript, que es el controlador de eventos, y esta función manejará un evento cuando suceda .

Aquí hay tres formas diferentes de responder a eventos en JavaScript.

JavaScript en línea

No recomendaría usar este enfoque, pero existe, por lo que hablaremos de él en aras de la integridad. Al igual que puede colocar CSS en línea en su HTML, también puede colocar JavaScript en línea. Como probablemente sepa, siempre es mejor colocar su CSS en su propio archivo, y JavaScript no es diferente. Sin embargo, veamos cómo hacer algo en línea, solo para verlo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>What Are JavaScript Events</title>
</head>
 
<body>
<ul id="domtut">
  <li><a href="#" onclick="alert('What can I say? Alert Boxes are GREAT for tutorials!');">Click It or Ticket!</a></li>
</ul>
 
</body>
</html>

Aquí simplemente le damos a nuestra etiqueta a un onclickcontrolador de eventos, y sí, simplemente ejecutamos un cuadro de alerta para demostrar que está haciendo algo.

Sintaxis de evento de punto de elemento

La segunda forma de manejar eventos es usar la sintaxis de especificar el elemento, luego usar la .sintaxis del operador de puntos para elegir un evento. Hay muchos IDE o editores de desarrollo integrados gratuitos que pueden ayudarlo con sugerencias de autocompletar para usar esto. Por ejemplo, en este fragmento utilizamos los muy hábiles soportes de Adobe para ayudarnos con el autocompletado. Tan pronto como comencemos a escribir el nombre del elemento, luego ingrese el punto, una lista de opciones disponibles estará disponible para usted así:

Así que ahora, nos estamos moviendo nuestro script a su propio archivo con el nombre, tut.js . Así es como lo incluimos en el HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html>
 
<head>
 <meta charset="utf-8">
 <title>What Are JavaScript Events</title>
</head>
 
<body>
 <ul id="domtut">
  <li>
   <a id="smiley" href="#">The Second Method!</a>
  </li>
 </ul>
 
 <script src="tut.js">
 </script>
</body>
 
</html>

Ahora que tenemos esto en juego, podemos poner algún script real en el archivo de script así:

1
2
3
4
5
var a = document.getElementById('smiley');
 
a.onclick = function () {
 console.log('Oh yeah, you KNOW I just clicked that link!');
}

¡Excelente! Aquí simplemente tomamos el elemento que nos interesa, que sería laaetiqueta, y lo asignamos a una variable nombradaa. Ahora simplemente asignamos una función anónima alonclickevento de ese elemento. Esta función anónima es el controlador de eventos que solo se ejecutará cuando un usuario haga clic en el elemento. Esta es una forma mucho más común de hacer cosas en JavaScript. Si la idea de asignar una función anónima a un evento o variable es nueva para usted, no se preocupe, ¡cubriremos la función en JavaScript en profundidad pronto!

Agregar oyente de eventos

La tercera forma de manejar eventos es usando un método especial que agrega un oyente al documento o elemento que le interesa. Reescribamos el ejemplo anterior y usemos este estilo en su lugar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html>
 
<head>
 <meta charset="utf-8">
 <title>What Are JavaScript Events</title>
</head>
 
<body>
 <ul id="domtut">
  <li>
   <a id="smiley" href="#">The Third Method!</a>
  </li>
 </ul>
 
 <script src="tut.js">
 </script>
</body>
 
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
var a = document.getElementById('smiley');
 
funcone = function () {
 console.log('Oh yeah, you KNOW I just clicked that link!');
}
 
functwo = function () {
 console.log('Two actions firing, yeah whats up now?!');
}
 
a.addEventListener('click', funcone, false);
 
a.addEventListener('click', functwo, false);

Cuando ejecutamos el código haciendo clic en nuestro enlace, ¡podemos ver que suceden algunas cosas interesantes!

Esto nos lleva a una pequeña discusión sobre los pros y los contras de utilizar este enfoque. Como notó, en realidad activamos dos acciones basadas en el evento de un clic. Entonces esto es algo bastante flexible. Podemos configurar muchos oyentes para un solo evento. Tampoco tiene que ser necesariamente un evento de clic. Sin embargo, con este beneficio adicional también es un inconveniente. El inconveniente aquí es que Internet Explorer versión 8 y anteriores utilizan un método diferente todos juntos para lograr este objetivo. Su método para hacer esto utiliza attachEvent('click', somefunc); Esto se resuelve fácilmente mediante el uso de una biblioteca compatible con varios navegadores como jQuery para la que también habrá una serie completa pronto

Eventos comunes de JavaScript

Ahora echaremos un vistazo a los eventos más comunes con los que seguramente se encontrará en la programación diaria. Algunos de estos incluyen

al hacer clic

El evento de clic es uno de los eventos más comunes que se utilizan. Piénselo, navegamos por toda Internet en función de los clics. Entonces, tendría sentido para nosotros tener una buena idea de cómo funcionan los eventos de clic en JavaScript. Consideremos un ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html>
 
<head>
 <meta charset="utf-8">
 <title>What Are JavaScript Events</title>
 <script src="tut.js">
 </script>
</head>
 
<body>
 <ul id="domtut">
  <li>
   <img src="/bootstrap/img/panda.png">
  </li>
 </ul>
 
</body>
 
</html>

1
2
3
document.onclick = function () {
 console.log('You have clicked the document');
}

Al cargar este script en el navegador y hacer clic en cualquier parte del documento, vemos que el registro se activa correctamente. Este es solo un ejemplo simple para mostrar que * cualquier * elemento puede manejar el evento de clic, no solo un enlace, botón o imagen. El documento también es un elemento, y siguiendo la convención element.eventpodemos hacer lo que queramos en la página.

Hacer clic en el documento es genial, pero es como usar una red de ballenas para capturar un pececillo. En otras palabras, no es tan útil. En aplicaciones reales, necesitaremos responder a eventos de clic muy específicos. Dado que todo en la página es un elemento del DOM y el acceso a un evento de JavaScript sigue la element.eventconvención, podemos responder a un clic en * cualquier cosa * en la página. Configuremos un ejemplo de cómo hacer clic en la imagen de Panda.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html>
 
<head>
 <meta charset="utf-8">
 <title>What Are JavaScript Events</title>
 <script src="tut.js">
 </script>
</head>
 
<body>
 <ul id="domtut">
  <li>
   <img id="pandalove" src="/bootstrap/img/panda.png">
  </li>
 </ul>
 
</body>
 
</html>

1
2
3
4
5
6
7
8
9
document.onclick = function () {
 console.log('You have clicked the document');
}
 
var panda = document.getElementById('pandalove');
 
panda.onclick = function () {
 console.log('It is fun to click the Panda');
}

Cargar esto en el navegador y hacer clic en Panda nos da algunos resultados extraños. Si hacemos clic en él, obtendremos la misma respuesta exacta que la captura de pantalla del primer ejemplo. ¿Por qué esto no funciona? Observe en el HTML que movimos el script hacia arriba en el encabezado de la página en lugar de justo antes de la etiqueta del cuerpo de cierre. También recuerde que cuando los sitios web se cargan en un navegador, todo se lee de arriba hacia abajo y se ejecuta en el orden en que se leyó, incluido JavaScript. El problema en este ejemplo es que JavaScript se ejecuta antes de que la imagen de Panda se haya cargado en la página. ¡Será difícil responder a un clic en un elemento que aún no existe! Esto conduce a un concepto y una regla importantes a seguir cuando se trabaja con JavaScript. Es importante que se hayan cargado todos los elementos de la página, lo que significa que el DOM está completamente intacto y en su lugar, antes de que se ejecute JavaScript. Este es un problema común con una solución simple.

onload

El objeto de ventana es el objeto de nivel superior en JavaScript. Aunque hemos estado hablando mucho sobre el objeto de documento, es el objeto de ventana el que se encuentra en el pináculo del DOM. Debido a esto, es el window.onloadevento que nos dice cuando el DOM ha terminado de cargarse y está listo para funcionar. Podemos hacer solo una pequeña modificación a nuestro ejemplo de JavaScript, y ahora todo funcionará. Observar.

1
2
3
4
5
6
7
8
9
10
11
window.onload = function () {
 document.onclick = function () {
  console.log('You have clicked the document');
 }
 
 var panda = document.getElementById('pandalove');
 
 panda.onclick = function () {
  console.log('It is fun to click the Panda');
 }
}

Entonces, ¿qué está pasando aquí? No cambiamos el orden en el que se lee la información en el navegador a medida que se carga la página. De hecho, el navegador todavía utiliza el JavaScript en cuestión antes de que se cargue la imagen de Panda. Sin embargo, si probamos esto en el navegador, todo está funcionando.

La respuesta radica en el hecho de que incluimos nuestro código JavaScript existente dentro del window.onloadevento. Hablemos de ello. La página web comienza a cargarse y nuevamente se encuentra con el archivo JavaScript primero, antes de que se cargue la imagen de Panda. Ahora, aquí está la diferencia: en el ejemplo anterior, las cosas comenzaron a ejecutarse correctamente tan pronto como se golpearon las declaraciones en el código. Específicamente, cuando esta línea de código intenta ejecutar

1
2
3
 panda.onclick = function () {
  console.log('It is fun to click the Panda');
 }

panda tiene un valor nulo, por lo que el código falla. En nuestro nuevo ejemplo, todo el JavaScript está dentro del bloque:

1
2
3
window.onload = function () {
   //  code now here
}

Cuando el motor de JavaScript llega a esta línea, sabe leer esto como tal. No ejecute ningún código dentro de este bloque hasta que la página web se haya cargado por completo. Es esta línea de código la que nos dice cuándo está listo el DOM. En inglés simple, podemos leerlo como, "Cuando la página web esté lista, ejecute este código". Y eso es exactamente lo que hace, ¡y todo está bien!

onfocus y onblur

Los eventos onfocus y onblur se utilizan todo el tiempo en el procesamiento de formularios. Digamos que tenemos un campo de entrada que es parte de nuestra página web. Nos gustaría que los usuarios pudieran enviar comentarios sobre sus opiniones sobre el Panda. Sería bueno agregar algo de interactividad a la entrada para pedirle al usuario que ingrese alguna información y borrar el texto cuando el usuario haga clic en el campo y esté listo para escribir. Aquí está el marcado y el código para que eso suceda.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html>
 
<head>
 <meta charset="utf-8">
 <title>What Are JavaScript Events</title>
 <script src="tut.js">
 </script>
</head>
 
<body>
 <ul id="domtut">
  <li>
   <img id="pandalove" src="/bootstrap/img/panda.png">
  </li>
  <li>
   <form>
    <input size="70" type="text" value="Do you like the Panda? Click here to tell us!" id="text" />
    <input type="submit" value="submit" />
   </form>
  </li>
 </ul>
</body>
 
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.onload = function () {
 var textarea = document.getElementById('text');
 
 textarea.onfocus = function () {
  if (textarea.value == 'Do you like the Panda? Click here to tell us!') {
   textarea.value = '';
  }
 }
 
 textarea.onblur = function () {
  if (textarea.value == '') {
   textarea.value = 'Do you like the Panda? Click here to tell us!';
  }
 }
 
}

Podemos hacer clic en el campo de entrada y agregar nuestros pensamientos. Al hacer esto, el texto predeterminado se borrará automáticamente.

Una vez más, al hablarlo, tendrá todo el sentido del mundo. La página web se carga y cuando se encuentra el campo de entrada en la página, se completa con el texto “ ¿Te gusta el Panda? ¡Haz clic aquí para contarnos! ”¡Esto les da a nuestros usuarios una buena indicación de lo que nos gustaría que hicieran con esta entrada de texto! Ahora, tenemos algo de código JavaScript que se ejecutará cuando la página esté lista, ya que mantuvimos nuestra lógica dentro del window.onloadevento aquí. Cuando se ejecuta este código, comprueba cuándo el usuario hace clic dentro de nuestra entrada haciendo uso del evento onfocus . onfocusnos dice cuándo un campo de formulario tiene actualmente el foco, o cuándo el usuario ha hecho clic dentro de él. Cuando el usuario hace clic en este campo, se le da el foco, y en ese momento verificamos si el valor de ese elemento es igual a nuestro texto predeterminado. Entonces, le indicamos a JavaScript que establezca este texto en una cadena vacía. Esto proporciona la acción de borrar nuestro texto dado y permite al usuario escribir sus propios comentarios. Lo siguiente que sucede es que verificamos si el usuario hace clic fuera de este campo usando el evento onblur . onblurnos dice cuándo el usuario ha hecho clic en algún otro lugar de la página, dejando el elemento actualmente en foco. Luego, JavaScript verifica si el valor de ese elemento es una cadena vacía. Esta condición sería cierta si el usuario hiciera clic y dejara una entrada en blanco. En ese caso, queremos recordarles que oye, queremos saber qué piensas de estos amigos Pandas. Entonces, lo que haremos es que si el valor está vacío, lo volveremos a establecer en “ ¿Te gusta el Panda? ¡Haz clic aquí para contarnos! ”De esta manera, estamos empujando al usuario en la dirección correcta en cuanto a la llamada a la acción en la página. Bastante genial, ¿verdad?

Temporizadores de JavaScript

Si bien no es oficialmente un evento de JavaScript, los tiempos son una característica realmente increíble del lenguaje. Tienen una sensación de evento, así que ¿por qué no cubrir también lo que podemos hacer con los temporizadores, verdad? Los temporizadores se utilizan todo el tiempo para cosas como presentaciones de diapositivas, relojes o cualquier otra instancia en la que necesitemos que se lleve a cabo una acción después de un período de tiempo establecido o varias veces a lo largo del tiempo.

setTimeout

La función setTimeout () toma dos argumentos. El primero es la función o acción a realizar. El segundo es la cantidad de tiempo de espera antes de ejecutar la función dada. Este valor se proporciona en milisegundos. Por ejemplo, si queremos que suceda algo después de un período de tiempo de 3 segundos, pasamos 3000. Usamos setTimeout cuando queremos que se lleve a cabo una acción, pero solo después de un tiempo específico. Aquí hay un código de ejemplo para mostrar setTimeout en acción:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html>
 
<head>
 <meta charset="utf-8">
 <title>What Are JavaScript Events</title>
 <script src="tut.js">
 </script>
</head>
 
<body>
 <div id="one"></div>
 <div id="two"></div>
 <div id="three"></div>
 <div id="four"></div>
 <div id="five"></div>
 <div id="six"></div>
</body>
 
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
window.onload = function () {
 var one = function () {
  var h6 = document.createElement('h6');
  var one = document.getElementById('one');
  one.appendChild(h6).innerHTML = 'This';
 };
 
 var two = function () {
  var h5 = document.createElement('h5');
  var two = document.getElementById('two');
  two.appendChild(h5).innerHTML= 'is';
 };
 
 var three = function () {
  var h4 = document.createElement('h4');
  var three = document.getElementById('three');
  three.appendChild(h4).innerHTML = 'an';
 };
 
 var four = function () {
  var h3 = document.createElement('h3');
  var four = document.getElementById('four');
  four.appendChild(h3).innerHTML = 'example';
 };
 
 var five = function () {
  var h2 = document.createElement('h2');
  var five = document.getElementById('five');
  five.appendChild(h2).innerHTML = 'of';
 };
 
 var six = function () {
  var h1 = document.createElement('h1');
  var six = document.getElementById('six');
  six.appendChild(h1).innerHTML = 'Timers in JavaScript!';
 };
 
 setTimeout(one, 504);
 setTimeout(two, 720);
 setTimeout(three, 1029);
 setTimeout(four, 1470);
 setTimeout(five, 2100);
 setTimeout(six, 3000);
}

Este es un ejemplo bastante bueno, considerando que simplemente podríamos haber ejecutado una alerta en la página después de 4 segundos. En cambio, lo que hacemos aquí es rellenar 6 elementos div diferentes con un mensaje. Cada setTimeoutevento maneja una parte del mensaje. Este es un ejemplo de temporizadores en JavaScript.

setInterval

La función setInterval es como un setTimeout en la reproducción. Si tiene una acción que desea que se realice repetidamente a intervalos establecidos, utilice esta función. Como siempre, proporcionaremos un ejemplo divertido:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html>
 
<head>
 <meta charset="utf-8">
 <title>What Are JavaScript Events</title>
 <script src="tut.js">
 </script>
</head>
 
<body>
 <h1 id="message"></h1>
</body>
 
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.onload = function () {
 
 var div = document.getElementById('message');
 var message = ['JavaScript', 'PHP', 'CSS', 'HTML5'];
 var messageIndex = 0;
 
 function welike() {
  div.innerHTML = message[messageIndex];
  messageIndex++;
  if (messageIndex >= message.length) {
   messageIndex = 0;
  }
 }
 
 setInterval(welike, 500);
 
}

Aquí está la idea de lo que está sucediendo en este ejemplo. Tenemos un elemento h1 muy simple en la página HTML. El JavaScript es un poco más complicado. Vamos a señalarlo con viñetas.

Recupere el elemento que tenía una identificación de mensaje.
Complete una variable con una matriz de palabras.
Establezca un índice para que actúe como contador.
Defina una welike()función.
Complete el elemento HTML con un índice de nuestra matriz.
Mueva el contador de índice hacia adelante en 1.
Repita hasta que se hayan utilizado todas las palabras de la matriz.
Si llegamos al final de la matriz, restablecemos el contador de índice a 0.
Úselo setIntervalpara llamar a nuestra welikefunción cada 500 milisegundos.

Cuando cargue esto en el navegador, verá una h1etiqueta que tiene texto que cambia entre JavaScript , PHP , CSS y HTML5 cada 500 milisegundos.

clearInterval

De acuerdo, ha configurado un montón de palabras girando en la página web cada 500 milisegundos. Sí, no pasará mucho tiempo para que esto empiece a volverte loco. Antes de gritar: "¡Haz que se detenga!" Siéntete cómodo, ¡podemos escribir algo de JavaScript usando la función clearInterval para recuperar tu cordura! Aquí está el HTML y JavaScript actualizado para darnos un botón Iniciar y Detener para iniciar y detener la welike()función en tiempo real, ¡es bastante hábil!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html>
 
<head>
 <meta charset="utf-8">
 <title>What Are JavaScript Events</title>
 <script src="tut.js">
 </script>
</head>
 
<body>
 <h1 id="message"></h1>
 <table width="500">
  <tr>
   <td>
    <input type="submit" name="start" id="start" value="Start">
   </td>
   <td>
    <input type="submit" name="stop" id="stop" value="Stop">
   </td>
  </tr>
 </table>
</body>
 
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload = function () {
 
 var start = document.getElementById('start');
 var stop = document.getElementById('stop');
 var div = document.getElementById('message');
 var message = ['JavaScript', 'PHP', 'CSS', 'HTML5'];
 var messageIndex = 0;
 
 function welike() {
  div.innerHTML = message[messageIndex];
  messageIndex++;
  if (messageIndex >= message.length) {
   messageIndex = 0;
  }
 }
 
 start.onclick = function () {
  
  var stopstart = setInterval(welike, 500);
  
  stop.onclick = function () {
   clearInterval(stopstart);
  }
  
 }
 
 
}

¿Cómo funciona clearInterval? En este fragmento de JavaScript no hacemos simplemente una llamada a setIntervalpasar la welikefunción y 500 milisegundos. Primero configuramos controladores de eventos onclick para dos nuevos botones en la página HTML. Cuando el usuario hace clic en el botón Inicio, se ejecuta una función anónima. Dentro de la función anónima es donde activamos esa setIntervalfunción. Cuando se hace clic, esto pone la welikefunción en movimiento una vez cada 500 milisegundos. Observará que también asignamos un valor de retorno a la variable stopstart cuando setIntervalse llamó. Lo que esto hace es básicamente darnos una idea del setIntervalproceso para esta instancia en particular. Podemos pasar este identificador a clearIntervalfunción y sabe que esto está indicando a esa instancia de setIntervalque se detenga. Esto es genial amigos

Header Ads Widget