Laboratoria te invitó a este evento público : jQuery.
Aceptar ✔ — Declinar ✘
¿Qué es un Evento en jQuery?.
Los eventos de jQuery son métodos que surgen cuando el usuario hace una interacción con el navegador.
Los eventos se ejecutan aunque no tengan ningún escuchador. Cuando Estos suceden igual no haya nada escuchándolos, recién cuando nos suscribimos a escuchar un evento cuando una función se dispara, y se dispara cuando sucede alguna acción con nuestra web ya sea provocado por el usuario o por el sistema (como por ejemplo cuando la página termina de cargar).
En el siguiente gráfico podemos ver qué es lo que ocurre detrás de esta interacción:
Mejor poner “Veamos el caso de un botón que dispara un modal:
Esto permite vincular un listener de un evento a un elemento, quiere decir que podemos manipular elementos directamente por la clase o por la propia etiqueta, a la cual le podemos agregar un comportamiento e incluso detener su evento por defecto.
Propagación de Eventos o Bubbling:
La mayoría de los eventos hacen bubbling, pero ¿por qué esto funciona así?, ¿será qué estamos haciendo algo mal en nuestro código?, para nada. Para empezar esto sucede por defecto, la propagación de eventos actúa por detrás, de forma que cuando el evento se dispara y se propaga por el DOM ascendiende hasta éste.
Entonces ¿cómo se desarrollaría el evento?, este caso como mencionamos el evento ira generando una acción, la cual va a ser desde el interior hacia el exterior, vamos a explicarlo mejor en el siguiente flujo. Tenemos tres elementos <div> anidados de la forma siguiente:
Además tenemos nuestro código jQuery así:
El código HTML de arriba se visualiza como:
Si hacemos click sobre el rectángulo azul, veremos que se presentan las alertas en secuencia, y su comportamiento sería de esta manera:
[Off Topic]
Y se expresaría de la siguiente manera 😂:
[End Off Topic]
Poniéndonos serios, En caso quisieramos cambiar el comportamiento natural del evento, el método para ello es event.stopPropagation().
En un caso general se podría usar de la siguiente manera:
En otras palabras, event.stopPropagation() no solo detiene el movimiento hacia arriba, sino también al elemento actual y los otros manipuladores que se ejecutarán.
Para detener la formación de bubbling y evitar que los eventos ocurran existe un método el cual es :event.stopImmediatePropagation(). Después de esto todo lo que se pudiera ejecutar se detendrá inmediatamente.
Normalmente no hay necesidad real para evitar la formación de bubbling, bubbling es conveniente. No lo detenga sin una necesidad real: obvia y arquitectónicamente bien pensada.
Ya que a veces event.stopPropagation()crea trampas ocultas que posteriormente pueden convertirse en problemas.
Por ejemplo :
1. Creamos un menú anidado. Cada submenú tiene click como evento y llamamos a stopPropagation para detener los clicks hacia afuera.
2. Luego decidimos obtener resultados en base a esos clicks dentro de toda la página para contabilizarlos, usualmente un contador haría eso por document.addEventListener('click'…).
3. Nuestro contador no va a funcionar sobre el área de los clicks ya que lo detuvimos constopPropagation, entonces tendremos una “zona muerta”.
Otro método comúnmente utilizado para prevenir la acción predeterminada del evento es preventDefault() que cancela la acción predeterminada del evento (por ejemplo: seguir un enlace).
Algunos métodos y propiedades del Objeto Evento:
.delegate(): Adjunte un controlador a uno o más eventos para todos los elementos que coincidan con el selector, ahora o en el futuro, en función de un conjunto específico de elementos raíz.
.die(): Elimine los controladores de eventos previamente conectados utilizando .live () de los elementos.
.error() : Vincule un controlador de eventos al evento JavaScript de “error”.
.event.currentTarget : El elemento DOM actual dentro de la fase de burbujeo del evento.
Event.data: Un objeto opcional de datos pasados a un método de evento cuando el controlador de ejecución actual está enlazado.
Event.delegateTarget : El elemento donde se conectó el controlador de eventos jQuery actualmente denominado.
Event.isDefaultPrevented() :Devuelve si event.preventDefault () se llamó alguna vez en este objeto de evento.
event.isImmediatePropagationStopped () : Devuelve si Event.stopImmediatePropagation () fue llamado nunca en este objeto de evento.
event.isPropagationStopped(): Devuelve si event.stopPropagation () se ha llamado alguna vez a este objeto de evento.
event.metaKey: Indica si la tecla META se pulsó cuando se disparó el evento.
event.namespace: El espacio de nombres especificado cuando se desencadenó el evento.
event.pageX: La posición del ratón relativa al borde izquierdo del documento
event.pageY: La posición del ratón en relación con el borde superior del documento.
event.preventDefault(): Si se llama a este método, la acción predeterminada del evento no se activará.
event.relatedTarget: El otro elemento DOM implicado en el evento, si lo hay.
event.result: El último valor devuelto por un controlador de eventos que fue activado por este evento, a menos que el valor no se haya definido.
event.stopImmediatePropagation(): Mantiene el resto de los manejadores de ser ejecutado e impide que el evento de burbujeo hasta el árbol DOM.
event.stopPropagation(): Impide que el evento burbujee el árbol DOM, evitando que los controladores de origen sean notificados del evento.
event.target: El elemento DOM que inició el evento.
event.timeStamp: La diferencia en milisegundos entre el momento en que el navegador creó el evento y el 1 de enero de 1970.
event.type: Describe la naturaleza del evento.
event.which: Para eventos de tecla o mouse, esta propiedad indica la tecla o botón específico que se pulsó.
Otros elementos de un Evento:
Asi como los mencionados anteriormente también existen varias propiedades y métodos que nos sirven para poder obtener datos útiles:
pageX,pageYLa posición del puntero del ratón en el momento que el evento ocurrió, relativo a las zonas superiores e izquierda de la página.typeEl tipo de evento (por ejemploclick).whichEl botón o tecla presionada.dataAlguna información pasada cuando el evento es ejecutado.targetEl elemento DOM que inicializó el evento.
Ahora veremos una lista de eventos en jQuery:
.bind() : Adjuntar un controlador a un evento para los elementos.
.blur(): Vincule un controlador de eventos al evento JavaScript “desenfoque” o active ese evento en un elemento.
.change(): Vincule un controlador de eventos al evento JavaScript de “cambio” o active ese evento en un elemento.
.click(): Vincule un controlador de eventos al evento JavaScript de “clic” o desencadene ese evento en un elemento.
.contextmenu(): Vincula un controlador de eventos al evento de contexto “contextmenu” de JavaScript o active ese evento en un elemento.
.dbclick(): Vincule un controlador de eventos al evento JavaScript “dblclick” o desencadene ese evento en un elemento.
.focus(): Vincule un controlador de eventos al evento JavaScript de “focus” o desencadene ese evento en un elemento.
.focusin(): Vincule un controlador de eventos al evento “focusin”.
.focusout(): Vincule un controlador de eventos al evento de JavaScript “focusout”.
.hover(): Vincule uno o dos manejadores a los elementos coincidentes, para ejecutarlos cuando el puntero del ratón entre y salga de los elementos.
jQuery.holdReady(): Sostiene o libera la ejecución del evento listo de jQuery.
jQuery.proxy(): Toma una función y devuelve una nueva que siempre tendrá un contexto particular.
jQuery.ready : Un objeto similar a Promise (o “thenable”) que se resuelve cuando el documento está listo.
.keydown(): Vincule un controlador de eventos al evento JavaScript de “clave” o active ese evento en un elemento.
.keypress(): Vincule un controlador de eventos al evento JavaScript de “presión de tecla” o desencadene ese evento en un elemento.
.keyup(): Vincule un controlador de eventos al evento JavaScript de “clave” o active ese evento en un elemento.
.live(): Adjunte un controlador de eventos para todos los elementos que coincidan con el selector actual, ahora y en el futuro.
.load(): Vincule un controlador de eventos al evento JavaScript de “carga”.
.mousedown(): Vincule un controlador de eventos al evento JavaScript “mousedown” o active ese evento en un elemento.
.mouseenter(): Vincule un manejador de eventos para que se dispare cuando el mouse entre en un elemento o active ese controlador en un elemento.
.mouseleave(): Vincule un manejador de eventos para que se dispare cuando el mouse abandona un elemento, o active ese controlador en un elemento.
.mousemove(): Vincule un controlador de eventos al evento JavaScript “mousemove” o active ese evento en un elemento.
.mouseout(): Vincule un controlador de eventos al evento JavaScript “mouseout” o active ese evento en un elemento.
.mouseover(): Vincule un controlador de eventos al evento JavaScript “mouseover” o active ese evento en un elemento.
.mouseup(): Vincule un controlador de eventos al evento JavaScript “mouseup” o active ese evento en un elemento.
.off(): Quite un controlador de eventos.
.on(): Adjuntar una función de controlador de eventos para uno o más eventos a los elementos seleccionados.
.one(): Adjuntar un controlador a un evento para los elementos. El controlador se ejecuta como máximo una vez por elemento por tipo de evento.
.ready(): Especifique una función que se ejecutará cuando el DOM esté completamente cargado.
.resize(): Vincule un controlador de eventos al evento JavaScript de “cambio de tamaño” o active ese evento en un elemento.
.scroll(): Vincule un controlador de eventos al evento JavaScript de “desplazamiento” o active ese evento en un elemento.
.select(): Vincule un controlador de eventos al evento JavaScript “select” o active ese evento en un elemento.
.submit(): Vincule un controlador de eventos al evento “submit” de JavaScript o active ese evento en un elemento.
.toggle(): Vincule dos o más manejadores a los elementos coincidentes, para que se ejecuten en clics alternos.
.trigger(): Ejecute todos los controladores y comportamientos asociados a los elementos coincidentes para el tipo de evento dado.
.triggerHandler(): Ejecutar todos los controladores adjuntos a un elemento para un evento.
.unbind(): Quite un controlador de eventos previamente adjunto de los elementos.
.undelegate(): Elimine un controlador del evento para todos los elementos que coincidan con el selector actual, basándose en un conjunto específico de elementos raíz.
.unload(): Enlazar un controlador de eventos al evento JavaScript de “descarga”.
Funciones auxiliares de eventos:
jQuery nos ofrece dos llamados “funciones auxiliares” para trabajar con eventos.
Por ejemplo si pasamos el mouse sobre el elemento seleccionado, este puede ser un <p> o un <div> y agregamos los eventos como mouseleave y mouseenter, esto ocurrirá en el orden de entrar y salir pasando sobre el elemento, en pocas palabras con esto podriamos simular el comportamiento de un :hover.
En el caso de asociarlo a un elemento, nuestro código sería así:
Gracias por asistir a este evento, vuelve pronto!
