Contenidos
Envío de eventos en javascript
Comencemos con la propagación de eventos. Este es el término general para el burbujeo de eventos y la captura de eventos. Consideremos el típico marcado para construir una lista de imágenes enlazadas, para una galería de miniaturas por ejemplo:
Un clic en una imagen no sólo genera un evento de clic para el elemento IMG correspondiente, sino también para el padre A, para el abuelo LI y así sucesivamente, recorriendo todo el camino a través de todos los ancestros del elemento, antes de terminar en el objeto ventana.
En la terminología del DOM, la imagen es el objetivo del evento, el elemento más interno sobre el que se originó el clic. El objetivo del evento, más sus ancestros, desde su padre hasta el objeto ventana, forman una rama en el árbol DOM. Por ejemplo, en la galería de imágenes, esta rama estará compuesta por los nodos IMG, A, LI, UL, BODY, HTML, documento, ventana.
Esta rama es importante porque es el camino por el que se propagan (o fluyen) los eventos. Esta propagación es el proceso de llamar a todos los escuchadores para el tipo de evento dado, adjuntos a los nodos de la rama. Cada oyente será llamado con un objeto de evento que recoge la información relevante para el evento (más sobre esto más adelante).
Evento de clase Javascript
Este es mi problema: ¿es posible comprobar de alguna manera la existencia de un oyente de eventos adjuntado dinámicamente? ¿O cómo puedo comprobar el estado de la propiedad “onclick” (?) en el DOM? He buscado una solución en Internet, al igual que en Stack Overflow, pero no he tenido suerte. Aquí está mi html:
Lo que yo haría es crear un booleano fuera de tu función que empiece como FALSE y se ponga a TRUE cuando adjuntes el evento. Esto serviría como una especie de bandera para usted antes de adjuntar el evento de nuevo. Aquí hay un ejemplo de la idea.
Aunque han pasado más de 5 años desde que el OP publicó la pregunta, creo que la gente que se tropiece con ella en el futuro se beneficiará de esta respuesta, así que siéntase libre de hacer sugerencias o mejoras a la misma.
Este es un script que utilicé para comprobar la existencia de un oyente de eventos adjuntado dinámicamente. Usé jQuery para adjuntar un manejador de eventos a un elemento, y luego disparar ese evento (en este caso el evento ‘click’). De esta manera puedo recuperar y capturar las propiedades del evento que sólo existirán si el manejador de eventos está conectado.
Lista de eventos en Javascript
Ten en cuenta que dentro de onclick usamos comillas simples, porque el propio atributo está entre comillas dobles. Si olvidamos que el código está dentro del atributo y usamos comillas dobles dentro, como esto: onclick=”alert(“Click!”)”, entonces no funcionará bien.
Si añadimos paréntesis, entonces sayThanks() se convierte en una llamada a una función. Así que la última línea realmente toma el resultado de la ejecución de la función, que es indefinido (ya que la función no devuelve nada), y lo asigna a onclick. Eso no funciona.
Los desarrolladores de los estándares web lo entendieron hace tiempo y sugirieron una forma alternativa de gestionar los manejadores utilizando métodos especiales addEventListener y removeEventListener. Están libres de este problema.
Elemento que maneja el evento. Es exactamente lo mismo que esto, a menos que el manejador sea una función de flecha, o su esto esté ligado a otra cosa, entonces podemos obtener el elemento desde event.currentTarget.
Hay más propiedades. Muchas de ellas dependen del tipo de evento: los eventos de teclado tienen un conjunto de propiedades, los eventos de puntero – otro, los estudiaremos más adelante cuando lleguemos a los diferentes eventos en detalle.
Objeto de evento Javascript
Cuando se produce un evento de un oyente de eventos W3C y llama a su función asociada, también pasa un único argumento a la función: una referencia al objeto de evento. El objeto de evento contiene una serie de propiedades que describen el evento ocurrido.
Por convención, el nombre del parámetro e se utiliza en las funciones activadas por eventos para recibir el argumento del objeto evento. Si quisiera determinar el tipo de evento que ocurrió, como un clic, escribiría:
Varias otras propiedades de objetos de eventos menos utilizadas no aparecen en la Tabla 4.2, incluyendo las coordenadas del ratón. Peter-Paul Koch ofrece una discusión en profundidad y demostraciones de las propiedades de los objetos de evento en www.quirksmode.org/js/events_advanced.html.
Este código no funcionaría en un navegador de Microsoft, porque el modelo de Microsoft no pasa una referencia de objeto de evento como el modelo del W3C; en su lugar, utiliza un objeto global central que contiene las propiedades del evento más reciente. Empezaré con el enfoque del W3C y luego te mostraré cómo trabajar con el objeto de evento de Microsoft.