Share
Es importante tener en cuenta que puede declarar tantos personalizados Listo() Eventos como quieras. Usted no está limitado a adjuntar una sola .Listo() Evento al documento. los Listo() Los eventos se ejecutan en el orden en que están incluidos..
Notas: Pasando la función jQuery, una función - por ejemplo,. jQuery (funciton () // code here) - es un atajo para jQuery (documento) .ready ().
Utilizando la enlazar() método - por ejemplo. jQuery ('a'). bind ('clic', function () ) - puede agregar cualquiera de los siguientes controladores estándar a los elementos DOM apropiados.
Accentsconagua
difuminaratencióncargaredimensionarvolutadescargarantes de descargarhacer clichacer doble clicratón hacia abajomouseupmovimiento del ratónratón sobremouseoutcambioseleccionarenviarkeydownpulsación de teclatecla ArribaerrorObviamente, según los estándares DOM, solo ciertos manejadores coinciden con elementos particulares.
Además de esta lista de controladores estándar, también puede aprovechar enlazar() para adjuntar controladores personalizados jQuery - por ejemplo,. mouseenter y mouseleave - así como cualquier controlador personalizado que pueda crear.
Para eliminar controladores estándar o controladores personalizados, simplemente pasamos el desatar() método el nombre del controlador o el nombre del controlador personalizado que se debe eliminar, por ejemplo,. jQuery ('a'). Desvincular ('clic'). Si no se pasan parámetros a desatar(), Se eliminarán todos los controladores adjuntos a un elemento..
Estos conceptos que acabamos de discutir se expresan en el ejemplo de código a continuación..
Notas: jQuery proporciona varios accesos directos a la enlazar() Método para usar con todos los eventos DOM estándar, que excluye eventos jQuery personalizados como mouseenter y mouseleave. El uso de estos accesos directos simplemente implica sustituir el nombre del evento como el nombre del método, por ejemplo,. .hacer clic(), mouseout (), atención().
Puede adjuntar manejadores ilimitados a un solo elemento DOM usando jQuery.
jQuery proporciona el uno() método de manejo de eventos para vincular convenientemente un evento a elementos DOM que se ejecutarán una vez y luego se eliminarán. los uno() El método es sólo un envoltorio para enlazar() y desatar().
La sintaxis de acceso directo - por ejemplo,. .hacer clic(), mouseout (), y atención() - para vincular un controlador de eventos a un elemento DOM también se puede utilizar para invocar controladores de manera programática. Para hacer esto, simplemente use el método de evento de acceso directo sin pasarle una función. En teoría, esto significa que podemos vincular un controlador a un elemento DOM y luego invocarlo inmediatamente. A continuación, demuestro esto a través de la hacer clic() evento.
Di hola Di hola
Notas: También es posible utilizar el evento. desencadenar() método para invocar controladores específicos, por ejemplo,. jQuery ('a'). click (función () alert ('hi')). trigger ('click'). Esto también funcionará con espacios de nombre y eventos personalizados.
jQuery normaliza el objeto de evento de acuerdo con los estándares W3C. Esto significa que cuando el objeto de evento se pasa a un controlador de funciones, no tiene que preocuparse por las implementaciones específicas del navegador del objeto de evento (por ejemplo, Internet Explorer). evento de ventana). Puede usar los siguientes atributos y métodos del objeto de evento sin preocuparse de las diferencias del navegador porque jQuery normaliza el objeto de evento.
tipo de eventoevent.targetevent.dataevent.relatedTargetevent.currentTargetevento.pageXevento.páginaYevento.resultadoevent.timeStampevent.preventDefault ()event.isDefaultPrevented ()event.stopPropagation ()event.isPropagationStopped ()event.stopImmediatePropagation ()event.isImmediatePropagationStopped ()Para acceder al objeto de evento jQuery normalizado, simplemente pase la función anónima, pase a un método de evento jQuery, un parámetro llamado "evento" (o como quiera que lo llame). Luego, dentro de la función de devolución de llamada anónima, use el parámetro para acceder al objeto de evento. A continuación se muestra un ejemplo codificado de este concepto..
A menudo tendremos un objeto en el DOM que necesita tener varias funciones vinculadas a un solo controlador de eventos. Por ejemplo, tomemos el controlador de cambio de tamaño. Usando jQuery, podemos agregar tantas funciones a la window.resize manejador como nos gusta. Pero, ¿qué sucede cuando necesitamos eliminar solo una de estas funciones pero no todas? Si usamos $ (ventana) .unbind ('redimensionar'), todas las funciones adjuntas a la window.resize Se eliminará el controlador. Al poner nombre a un controlador (por ejemplo,. resize.unique), podemos asignar un enlace único a una función específica para su eliminación.
En el código anterior, agregamos dos funciones al controlador de cambio de tamaño. El segundo evento de cambio de tamaño (orden de documentos) agregado usa espacios de nombres y luego elimina inmediatamente este evento usando desatar(). Hice esto para señalar que la primera función adjunta no se elimina. Los eventos de espacios de nombres nos permiten etiquetar y eliminar funciones únicas asignadas al mismo controlador en un solo elemento DOM.
Además de desvincular una función específica asociada con un único elemento DOM y un controlador, también podemos usar el espacio de nombres de eventos para invocar exclusivamente (usando desencadenar()) un controlador específico y una función asociada a un elemento DOM. En el código de abajo, se agregan dos eventos de clic a , y luego usando espacios de nombres, solo se invoca uno.
hacer clic
Notas: No hay límite para la profundidad o el número de espacios de nombres utilizados, por ejemplo,. resize.layout.headerFooterContent.
El espacio de nombres es una excelente manera de proteger, invocar y eliminar cualquier controlador exclusivo que pueda requerir un complemento.
El espacio de nombres funciona con eventos personalizados y eventos estándar, por ejemplo,. click.unique o myclick.unique.
La delegación de eventos se basa en la propagación de eventos (a.k.a. bubbling). Cuando haces clic en un dentro de un , que está dentro de un al al
Esto significa que si adjuntamos un evento de clic a un que se encapsula dentro de la event.target) para identificar qué elemento en el DOM provocó que comenzara el burbujeo de eventos. De nuevo, esto nos dará una referencia al elemento que inició el burbujeo..
Al hacer esto, aparentemente podemos agregar un controlador de eventos a una gran cantidad de elementos DOM usando solo un solo controlador / declaración de eventos. Esto es extremadamente útil; por ejemplo, una tabla con 500 filas donde cada fila requiere un evento de clic puede aprovechar la delegación de eventos. Examine el código de abajo para aclaración.
Ahora, si literalmente hicieras clic en una de las viñetas reales de la lista y no en el enlace en sí, ¿adivina qué? Terminarás eliminando el event.target es el , no la . Dado que este es el caso, el padre() método agarrará el cuando se hace clic desde un pasando el padre() método una expresión de elemento.
$ (event.target) .parent ('li'). remove (); El punto importante aquí es que debe administrar con cuidado lo que se hace clic cuando el área donde se puede hacer clic contiene múltiples elementos encapsulados debido a que nunca se sabe exactamente dónde puede hacer clic el usuario. Debido a esto, debe verificar que el clic haya ocurrido en el elemento que esperaba.
Usando el práctico vivir() En el método de eventos, puede vincular los controladores a los elementos DOM que se encuentran actualmente en una página web y aquellos que aún no se han agregado. los vivir() el método utiliza la delegación de eventos para asegurarse de que los elementos DOM recién agregados / creados siempre responderán a los controladores de eventos, independientemente de las manipulaciones de DOM o los cambios dinámicos en el DOM. Utilizando vivir() es esencialmente un atajo para tener que configurar manualmente la delegación de eventos. Por ejemplo, usando vivir() Podríamos crear un botón que crea otro botón indefinidamente..
Después de examinar el código, debería ser obvio que estamos usando vivir() aplicar la delegación de eventos a un elemento padre ( elemento en el ejemplo de código) para que cualquier elemento de botón agregado al DOM siempre responda al controlador de clic.
Para eliminar el evento en vivo, simplemente usamos el morir() método-e.g. $ ('botón'). morir ().
El concepto a quitar es el vivir() El método podría usarse para adjuntar eventos a elementos DOM que se eliminan y agregan utilizando AJAX. De esta manera, debería renunciar a tener que volver a vincular eventos a nuevos elementos introducidos en el DOM después de la carga de la página inicial.
Notas: vivir() soporta los siguientes manejadores: hacer clic, hacer doble clic, ratón hacia abajo, mouseup, movimiento del ratón, ratón sobre, mouseout, keydown, pulsación de tecla, tecla Arriba.
vivir() Solo funciona contra un selector..
vivir() por defecto detendrá la propagación utilizando falso retorno dentro de la función enviada a la vivir() método.
Es posible pasar el evento. enlazar() Método varios controladores de eventos. Esto permite adjuntar la misma función, escrita una vez, a muchos manejadores. En el ejemplo de código a continuación, adjuntamos una única función de devolución de llamada anónima a los controladores de eventos de clic, tecla y cambio de tamaño en el documento..
Cuando se hace clic en un enlace o se envía un formulario, el navegador invocará su funcionalidad predeterminada asociada con estos eventos. Por ejemplo, haga clic en enlace y el navegador web intentará cargar el valor de la href atributo en la ventana del navegador actual. Para evitar que el navegador realice este tipo de funcionalidad, puede utilizar el preventDefault () Método del objeto de evento normalizado jQuery..
jQuery
Los eventos se propagan (a.k.a. bubble) hasta el DOM. Cuando un controlador de eventos se activa para cualquier elemento dado, el controlador de eventos invocado también se invoca para todos los elementos de ancestro. Este comportamiento predeterminado facilita soluciones como la delegación de eventos. Para prohibir este burbujeo predeterminado, puede usar el método de evento normalizado jQuery detener la propagación ().
detener
En el ejemplo de código anterior, el controlador de eventos adjunto a la Devolviendo falso - e.g. Si tuvieras que comentar el Con jQuery, tiene la capacidad de fabricar sus propios eventos personalizados utilizando el Ahora, debido a que estos eventos son personalizados y desconocidos para el navegador, la única forma de invocar eventos personalizados es activarlos mediante programación con jQuery. Por defecto, la clonación de estructuras DOM usando el Adjuntando un A menudo es necesario obtener las coordenadas X e Y del puntero del mouse en relación con un elemento que no sea la ventana gráfica o el documento completo. Esto generalmente se hace con información sobre herramientas, donde la información sobre herramientas se muestra en relación con la ubicación en la que se encuentra el mouse. Esto se puede lograr fácilmente restando el desplazamiento del elemento relativo de las coordenadas X e Y del mouse de la ventana gráfica..
Cancelando el comportamiento predeterminado y la propagación de eventos a través de
falso retorno falso retorno - es el equivalente de usar ambos preventDefault () y detener la propagación (). Haz click en mi falso retorno declaración en el código de arriba, alerta() se invocaría porque, de forma predeterminada, el navegador ejecutará el valor del href. Además, la página navegaría a jQuery.com debido a un evento borroso.
Crear eventos personalizados y desencadenarlos mediante desencadenador ()
enlazar() método. Esto se hace proporcionando la enlazar() Método con un nombre único para un evento personalizado.desencadenar() método. Examine el código a continuación para ver un ejemplo de un evento personalizado que se invoca usando desencadenar().
Clonación de eventos, así como elementos DOM
clon() El método no clona adicionalmente los eventos adjuntos a los elementos DOM que se están clonando. Para clonar los elementos y los eventos adjuntos a los elementos, debe pasar el clon() método un valor booleano de cierto. Añadir otro enlace
Obtención de las coordenadas X e Y del ratón en la ventana gráfica
movimiento del ratón En la página completa (documento), puede recuperar las coordenadas X e Y del puntero del mouse a medida que se mueve dentro de la ventana gráfica sobre el lienzo. Esto se hace recuperando el páginaY y pageX Propiedades del objeto de evento normalizado jQuery..
Obtención de las coordenadas X e Y del ratón en relación con otro elemento
