Change language
Python.Engineering Wiki Detector De Eventos Javascript

Detector De Eventos Javascript

__main__ Python module | ast Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | Event PHP module | exp | html Python module | http Python module | iat | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | site Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | test Python module | time Python module | types Python module | UI PHP module
Michael Zippo Michael Zippo 04.11.2021

La adición de funciones interactivas a un sitio web es donde destaca JavaScript. Si bien HTML y CSS se usan respectivamente para definir la estructura y los estilos de una página web, puede usar JavaScript para hacer que su sitio sea más dinámico.

En JavaScript, los eventos se usan para crear un sitio interactivo . En esta guía, hablaremos sobre los eventos de JavaScript. Exploraremos dónde se pueden usar los eventos, cómo definir un evento y cómo llamar a un evento. ¡Aquí vamos!

¿Qué es un evento de JavaScript?

Los eventos pueden ser activados por el navegador o por el usuario y pueden cambiar el estado de la página web. Cuando hace clic en un botón en una página web, se crea un evento de JavaScript. Cuando hace clic en un menú desplegable que se expande, se usa un evento de JavaScript.

Los eventos de JavaScript tienen una amplia gama de usos, que incluyen:

  • Comprobar si se ha completado un formulario
  • Mover a un usuario a otra página después de completar un formulario
  • Hacer que los menús desplegables sean interactivos
  • Permitir que un usuario acercar y alejar las imágenes

Para trabajar con eventos en JavaScript, debe conocer dos conceptos: controladores de eventos y detectores de eventos.

Un controlador de eventos es una función que se ejecuta cuando se desencadena un evento en una página web. Los detectores de eventos adjuntan una función de evento a un elemento HTML, por lo que cuando se ejecuta esa función, el elemento web cambia.

Los controladores de eventos se pueden definir de tres maneras: usando un controlador de eventos en línea, un event, o un detector de eventos.

Controladores de eventos en línea

La forma más fácil de comenzar con eventos en JavaScript es usar un controlador de eventos en línea. Esto significa que definirá su evento en su archivo HTML.

Para este ejemplo, supongamos que estamos diseñando un sitio web para una panadería llamada JJ Smith`s Bakery. Queremos que se solicite al usuario que ingrese el texto "Respuesta recibida" al enviar un formulario.

Considere el siguiente código:

Este código muestra una página web que se ve así:

YhBM86zXeUH6CVstZ3cqjSfPpNHrDi1FRgWXFZMeCKNiTylMsE3TAEvgnvBLnl1zf30hlI6DcqWpXeFiL8YiojTKYJQeJ7 ESoQz4KhfCYhqlT9JmsxZZXRVj0EKBL9jbEaCs4Oe

Hasta ahora, no mucho -.. algo que sucede Nuestra página web contiene un botón que debe hacer algo cuando se hace clic en nuestro botón cuando se hace clic en nuestro , no sucede nada. Esto se debe a que todavía tenemos que escribir nuestro controlador de eventos.

En el archivo main.js, pegue el siguiente código:

Este código encontrará el elemento con el id "enviado" y cambiará su contenido a "Formulario enviado". "Este código solo se ejecutará cuando nuestro submitForm () sea llamado. Esto está programado para que suceda cuando el usuario hace clic en nuestro botón.

Cuando hacemos clic en nuestro botón, sucede lo siguiente:

Como puede ver, nuestro mensaje aparece Utilizamos un administrador de eventos en línea para hacer que nuestra página web sea interactiva. Pero los controladores de eventos en línea no son la única forma de usar eventos en JavaScript. Veamos cómo usar la propiedad del controlador de eventos en nuestro código.

Eventos con propiedades de controlador

En un controlador en línea, debe especificar la función que desea realizar en su archivo HTML . En nuestro código HTML anterior, esta línea es donde definimos la función que queríamos llamar cuando se presionó nuestro botón:

Usando las propiedades del controlador, podemos eliminar el comando del evento "onclick" de nuestro código. Esto nos permite mover todo el JavaScript que hace que nuestra página web sea interactiva en su propio archivo. Para este ejemplo, le daremos a nuestro botón el ID de "botón", para que podamos identificar nuestro botón en el código JavaScript. Eliminamos el evento onclick y le asignamos un identificador a nuestro botón:

Para activar nuestro evento cuando se presiona el botón, escribiremos un evento con una propiedad de controlador dentro de nuestro "principal". js ". Aquí está el código que usaremos:

Cuando ejecuta este código y haga clic en el botón, se devuelve el siguiente mensaje:

4o62 FifBmuVWJDrNanvSaMu6tbum7kfLhkIyJ75xZ3Xt CsRgZsCf8qnj13uN1VyaoDaapwFE4pG BMvjQUHsAa1jLlGtRVPbnmOLDmzr98tzw38e18YY8 Hcaym YGeDzjzFwo

funciona nuestro botón de la misma como antes, pero nuestro código está escrito de una manera diferente. En lugar de escribir nuestros controladores de eventos en línea, los movimos a nuestro archivo main.js. Esto nos ayuda a escribir un código más manejable porque no tenemos que leer todo nuestro código HTML para saber dónde se activan nuestros eventos en línea.

Oyente de eventos

Los eventos se pueden usar para declarar un evento en JavaScript. compruebe siempre cuándo cambia el estado de un elemento i, y si ese elemento cambia, se ejecutará el código en el oyente.

Por ejemplo, cuando hace clic en un botón que está conectado a un detector de eventos, el detector "escucha" que se ha activado un evento del mouse. Luego ejecutará el código que asoció con ese detector de eventos en particular.

Nuestro código HTML para este ejemplo es el mismo que el anterior, pero haremos un pequeño cambio en nuestro " mano. js " archivo:

En este código, usemos addEventListener para crear un detector de eventos. Esto es en lugar de vincular nuestra función JavaScript submitForm () a un evento onclick como hicimos en nuestros dos últimos ejemplos.

Especificamos "clic" para decirle a nuestro código que escuche cuando se hace clic en nuestro botón con el puntero del mouse. Hay otros tipos de eventos además del evento de clic, como eventos de teclado, pero en este tutorial nos centraremos en el evento de clic del mouse.

Ejecutemos el código nuevamente y hagamos clic en el botón.

El resultado es el mismo que hemos visto en nuestros últimos dos ejemplos, pero esta vez estamos usando un detector de eventos HTML. Los detectores de eventos son la forma más nueva de declarar eventos en JavaScript, y son quizás el método más utilizado.

Conclusión

Los eventos de JavaScript le permiten hacer que su página web sea interactiva. Se puede activar un evento cuando presiona un botón, envía un formulario o pasa el cursor sobre el texto. Hay tres formas de declarar un evento en JavaScript: en línea, usando un propiedad, o usando un oyente.

¡Ahora está listo para comenzar a crear eventos de JavaScript como un desarrollador web profesional!