Los Eventos

Los eventos son acciones que suceden y se puede ejecutar unos códigos de javascript.

El Evento Click

Si se hace click sobre un objeto (botón), este evento invoca una función.

    En el Código 86, si se hace click en la etiqueta <button>, invoca la función miFuncion() que manda un mensaje “Hola Mundo”.

Descargar archivo codigo086.html 

Copiar enlace:
Pegar enlace en la url del explorador web y descarga el archivo:

Código 86: El Evento Click
<!-- Archivo:  codigo086.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
      <!-- La etiqueta meta que da el formato en español -->
      <meta charset="UTF-8">
      <!-- Título en la pestaña del navegador -->
   <title> Ejercicio </title>
</head>
<body>
   <!-- Hacer click en el botón  -->
   <button onclick="miFuncion()"> Mensaje </button>
   <!-- Códigos de JavaScript -->
   <script>
      // Función mensaje   
      function miFuncion() {
         alert("Hola Mundo");   
      }
   </script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo086.html

    En la Figura 82, si se presiona el botón en el explorador web, aparece el mensaje “Hola Mundo”.

Figura 82 – Vista en el explorador Web
Código 86: El Evento Click

El método addEventListener()

El método addEventListener() invoca una función cuando se genera un evento (evento click).

    En el Código 87, a la variable btn que es un botón con la propiedad addEventListener se el evento click qie invoca la función miFuncion() que muestra el mensaje “Hola Mundo”.


Código 87: El método addEventListener()
<!-- Archivo:  codigo087.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
      <!-- La etiqueta meta que da el formato en español -->
      <meta charset="UTF-8">
      <!-- Título en la pestaña del navegador -->
   <title> Ejercicio </title>
</head>
<body>
   <!-- Hacer click en el botón  -->
   <button id = "btn"> Mensaje </button>
   <!-- Códigos de JavaScript -->
   <script>
      // Asignar al botón una variable
      var btn = document.getElementById("btn");
      // Agregar el evento click y la función al botón
      btn.addEventListener("click", miFuncion);   
      // Función mensaje   
      function miFuncion() {
         alert("Hola Mundo");   
      }
   </script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo087.html

En la Figura 83, si se presiona el botón en el explorador web, aparece el mensaje “Hola Mundo”.

Figura 83 – Vista en el explorador Web
Código 87: El método addEventListener()

El Evento change

El evento change se ejecuta cuando los valores de las etiquetas <input>, <select> y <textarea> cambian.

    En el Código 88, a la variable select se le agrega la lista de las ciudades y se agrega el evento cambiar que invoca la función miFuncion() que muestra que ciudad seleccionó en la lista de ciudades.


Código 88: El Evento change
<!-- Archivo:  codigo088.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
      <!-- La etiqueta meta que da el formato en español -->
      <meta charset="UTF-8">
      <!-- Título en la pestaña del navegador -->
   <title> Ejercicio </title>
</head>
<body>
    <!-- Seleccionar una ciudad -->
   <label> 
      <select id="ciudad">
         <option value = "Caracas"> Caracas </option>
         <option value = "Valencia"> Valencia </option>
         <option value = "Maracay"> Maracay </option>
         <option value = "Mérida"> Mérida </option>
      </select>
   </label>
   </br>
   <!-- Mensaje -->
   <span id = "mensaje"> Caracas </span>
   <!-- Códigos de JavaScript -->
   <script>
      // Asignar select a una variable
      var select = document.getElementById("ciudad");
      // Agregar el evento al select
      select.addEventListener("change", miFuncion);   
      // Función mensaje   
      function miFuncion() {
         var val = document.getElementById("ciudad").value;
         document.getElementById("mensaje").innerHTML = val;
      }
   </script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo088.html

    En la Figura 84, si en la etiqueta select, se selecciona valencia, debajo de la etiqueta select muestra la ciudad seleccionada.

Figura 84 – Vista en el explorador Web
Código 88: El Evento change

El Evento mouseover

El evento mouseover se ejecuta cuando el puntero de mouse está sobre un elemento.

    En el Código 89, a la etiqueta <p> se le introduce a la variable mensaje y al la variable mensaje se le agrega el evento mouseover que invoca la función miFuncion() que muestra un mensaje. Si si coloca el puntero de ratón sobre la etiqueta <p> cambia el texto.


Código 89: El Evento mouseover
<!-- Archivo:  codigo089.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
   <!-- La etiqueta meta que da el formato en español -->
   <meta charset="UTF-8">
   <!-- Título en la pestaña del navegador -->
   <title> Ejercicio </title>
</head>
<body>
   <!-- Coloque el puntero del mouse en Mensaje -->
   <p id = "mensaje"> Mensaje </p>
   <!-- Códigos de JavaScript -->
   <script>
      // Asignar mensaje a una variable
      var mensaje = document.getElementById("mensaje");
      // Agregar el evento a mensaje
      mensaje.addEventListener("mouseover", miFuncion);   
      // Función mensaje   
      function miFuncion() {
         mensaje.innerHTML = "Hola Mundo";
      }
   </script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo089.html

    En la Figura 85, si coloca el puntero de ratón sobre Mensaje, aparece Hola Mundo, Figura 86.

Figura 85 – Vista en el explorador Web
Código 89: El Evento mouseover

Figura 86 – Vista en el explorador Web
Código 89: El Evento mouseover

El Evento keypress

El evento keypress se ejecuta cuando se presiona una tecla.

    En el Código 90, a la etiqueta <textarea> se le introduce a la variable área y a la variable área se le agrega el evento keypress que invoca la función miFuncion(). Al introducir texto a la etiqueta <textarea>, también aparece el mismo texto a la etiqueta <span>.


Código 90: El Evento keypress
<!-- Archivo:  codigo090.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
     <!-- La etiqueta meta que da el formato en español -->
     <meta charset="UTF-8">
     <!-- Título en la pestaña del navegador -->
   <title> Ejercicio </title>
</head>
<body>
   <!-- Escribir una tecla -->
   <textarea id = "area"></textarea>
   </br>
   <!-- Mensaje -->
   El valor es: <span id = "mensaje"></span>
   <!-- Códigos de JavaScript -->
   <script>
      // Asignar area a una variable
      var area = document.getElementById("area");
      // Agregar el evento a area
      area.addEventListener("keypress", miFuncion);   
      // Función mensaje   
      function miFuncion() {
         document.getElementById("mensaje").innerHTML = area.value;
      }
   </script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo090.html

En la Figura 87, si escribe casa, debajo de la etiqueta texarea aparece escrito casa.

Figura 87 – Vista en el explorador Web
Código 90: El Evento keypress

El Evento focus

En el Código 91, a la etiqueta <textarea> se le introduce a la variable área y a la variable área se le agrega el evento focus que invoca la función miFuncion(). Al haver click a la etiqueta <textarea>, el color de fondo de la etiqueta <textarea> cambiar a color amarillo. 


Código 91: El Evento focus
<!-- Archivo:  codigo091.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
   <!-- La etiqueta meta que da el formato en español -->
   <meta charset="UTF-8">
   <!-- Título en la pestaña del navegador -->
   <title> Ejercicio </title>
</head>
<body>
   <!-- Escribir un mensaje -->
   <textarea id = "area"> Escriba un mensaje </textarea>
   <!-- Códigos de JavaScript -->
   <script>
      // Asignar area a una variable
      var area = document.getElementById("area");
      // Agregar el evento a area
      area.addEventListener("focus", miFuncion);   
      // Función mensaje   
      function miFuncion() {
         area.style.background = "yellow";
      }
   </script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo091.html

    En la Figura 88, si hace click en Escriba un Mensaje, la etiqueta texarea cambia a color amarillo, Figura 89.

Figura 88 – Vista en el explorador Web
Código 91: El Evento focus

Figura 89 – Vista en el explorador Web
Código 91: El Evento focus

El Evento blur

En el Código 92, a la etiqueta <textarea> se le introduce a la variable área y a la variable área se le agrega el evento focus que invoca la función miFuncion() y también se agrega el evento blur que invoca la función miFuncion2(). Al haver click a la etiqueta <textarea>, el color de fondo de la etiqueta <textarea> cambiar a color amarillo y al hacer click fuera de la etiqueta <textarea>, el color de fondo de la etiqueta <textarea> cambiar a color blanco. 


Código 92: El Evento blur
<!-- Archivo: codigo092.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
    <!-- La etiqueta meta que da el formato en español -->
    <meta charset="UTF-8">
    <!-- Título en la pestaña del navegador -->
   <title> Ejercicio </title>
</head>
<body>
   <!-- Escribir un mensaje -->
   <textarea id = "area"> Escriba un mensaje </textarea>
   <!-- Códigos de JavaScript -->
   <script>
      // Asignar area a una variable
      var area = document.getElementById("area");
      // Agregar el evento focus a area
      area.addEventListener("focus", miFuncion1);   
      // Función mensaje   
      function miFuncion1() {
         area.style.background = "yellow";
      }
      // Agregar el evento blur a area
      area.addEventListener("blur", miFuncion2);   
      // Función mensaje   
      function miFuncion2() {
         area.style.background = "white";
      }
   </script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo092.html

    En al Figura 90, si hace click en Escriba un Mensaje, la etiqueta texarea cambiar a color amarillo, Figura 91 y después se hace click afuera de textarea, la etiqueta textarea cambia a blanco, Figura 92.

Figura 90 – Vista en el explorador Web
Código 92: El Evento blur

Figura 91 – Vista en el explorador Web
Código 92: El Evento blur

Figura 92 – Vista en el explorador Web
Código 92: El Evento blur

El Evento resize

En el Código 93, a las etiquetas <span> muestra el ancho y el alto del explorador web con su id=”ancho” y su id=”alto” respectivamente. Al objeto window se le agrega el evento resize que invoca la función miFuncion(). Al cambiar el tamaño de la ventana del explorador web, los valores de ancho y alto cambian porque se activa el evento resize e invoca la función miFuncion().


Código 93: El Evento resize
<!-- Archivo: codigo093.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
   <!-- La etiqueta meta que da el formato en español -->
   <meta charset="UTF-8">
   <!-- Título en la pestaña del navegador -->
   <title> Ejercicio </title>
</head>
<body>
   <!-- Ventana redimensión -->
   <p>Ventana Ancho:<span id="ancho"></span></p>
   <p>Ventana Alto:<span id="alto"></span></p>
   <!-- Códigos de JavaScript -->
   <script>
      // Agregar el evento resize a ventana
      window.addEventListener("resize", miFuncion);   
      // Función redimensionar ventana   
      function miFuncion() {
         document.getElementById("ancho").innerHTML = window.innerWidth;
         document.getElementById("alto").innerHTML = window.innerHeight;
      }
      // Iniciar ancho y alto de la ventana
      document.getElementById("ancho").innerHTML = window.innerWidth;
      document.getElementById("alto").innerHTML = window.innerHeight;
   </script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo093.html

    En la Figura 93, si se cambia el tamaño de la ventana al explorador web, se ve que los valores de ancho y alto cambian, Figura 94.

Figura 93 – Vista en el explorador Web,
Código 93: El Evento resize

Figura 94 – Vista en el explorador Web
Código 93: El Evento resize

Comentarios

Publicar un comentario

Entradas populares de este blog

Conceptos Básicos de JavaScript

Ing. Carlo Julio Castillo Vivas Programador JS, PHP y MySql Contenido Concepto JavaScript Herramientas Utilizadas La Carpeta js_ajax_jquery Escribiendo un Código en JavaScript Mostrar Mensaje con JavaScript Comentarios Variables Operadores Funciones Objetos Números Los Arreglos (Arrays) Los Eventos El Objeto Math Condicionales   Los Lazos El Intervalo de Tiempo   Expresiones Regular   Manejo de Errores    Modo Strict, var, let y const
Leer más