jQuery equivalente del método addEventListener de JavaScript

Question

Estoy tratando de encontrar el equivalente de jQuery de esta llamada al método JavaScript:

document.addEventListener('click', select_element, true); 

he llegado tan lejos como:

$(document).click(select_element); 

Pero eso no' t lograr el mismo resultado, como el último parámetro del método de JavaScript: un booleano que indica si el controlador de eventos se debe ejecutar en la fase de captura o burbujeo (según mi entender desde http://www.quirksmode.org/js/events_advanced.html) - se omite.

¿Cómo especifico ese parámetro u obtengo la misma funcionalidad usando jQuery?

Answer 1

No todos los navegadores evento de apoyo de la captura (por ejemplo, Internet Explorer versiones menos de 9 no lo hacen), pero todos lo hacen apoyar evento burbujeo, que es la razón por la cual es la fase utilizada para vincular manejadores a eventos en todas las abstracciones entre navegadores, incluido jQuery.

El más cercano a lo que usted está buscando en jQuery está utilizando bind() (sustituida por on() en jQuery 1.7+) o los métodos de jQuery específicos del evento (en este caso, click(), que llama bind() internamente de todos modos). Todos usan la fase de burbujeo de un evento elevado.

Answer 2

Lo más cercano sería la función bind:

http://api.jquery.com/bind/

$('#foo').bind('click', function() { 
    alert('User clicked on "foo."'); 
}); 

Answer 3

Como de jQuery 1.7, .on() es ahora el método preferido de eventos de unión, en lugar de .bind():

De http://api.jquery.com/bind/:

Como de jQuery 1.7, el método .on() es el preferido método para asociando manejadores de eventos a un documento. Para versiones anteriores, el método .bind() se usa para conectar un controlador de eventos directamente a los elementos . Los manejadores se adjuntan a los elementos actualmente seleccionados en el objeto jQuery, por lo que esos elementos deben existir en el punto donde se produce la llamada a .bind(). Para una vinculación de eventos más flexible, consulte la discusión de la delegación de eventos en .on() o .delegate().

La página de documentación se encuentra en http://api.jquery.com/on/

Answer 4

Ahora debe utilizar la función .on() para enlazar eventos.

Answer 5

Aquí es un excelente tratamiento de la Red de Desarrollo Mozilla (MDN) de esta cuestión para JavaScript estándar (si no desea depender de jQuery o entenderlo mejor en general):

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

aquí hay una discusión de flujo de eventos desde un enlace en el tratamiento anterior:

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

Algunos puntos clave son:

• Permite agregar más de un controlador para un evento
• Le da un control más preciso de la fase en la que el oyente se activa (captura contra burbujeo)
• Funciona en cualquier elemento DOM, no solo elementos HTML
• El valor de "esto" pasado al evento no es el objeto global (ventana), sino el elemento desde el cual se dispara el elemento. Esto es muy conveniente
• Código de legado navegadores IE es simple e incluida bajo el título "El legado de Internet Explorer y attachEvent"
• puede incluir parámetros si se encierra el gestor en una función anónima

Answer 6

Una cosa a destacar es que Los métodos de evento jQuery no activan/interceptan load en embed etiquetas que contienen SVG DOM que se carga como un documento separado en la etiqueta embed. La única forma que encontré de atrapar un evento load en estos casos fue utilizar JavaScript sin procesar.

Esto no funcionará (He intentado on/bind/load métodos):

$img.on('load', function() { 
    console.log('FOO!'); 
}); 

Sin embargo, esto funciona:

$img[0].addEventListener('load', function() { 
    console.log('FOO!'); 
}, false);