body - jQuery equivalente al método addEventListener de JavaScript

addeventlistener typescript

Question

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

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

He llegado tan lejos como:

$(document).click(select_element);

pero eso no logra el mismo resultado, como el último parámetro del método JavaScript: un booleano que indica si el controlador de eventos debe ejecutarse en la fase de captura o burbujeo (según mi comprensión de http://www.quirksmode.org/js/events_advanced.html ) - queda fuera.

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

Answer 1

A partir de jQuery 1.7, .on() es ahora el método preferido para vincular eventos, en lugar de .bind() :

Desde bind() :

A partir de jQuery 1.7, el método .on () es el método preferido para adjuntar manejadores de eventos a un documento. Para versiones anteriores, el método .bind () se usa para asociar 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 en que 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 on()

Answer 2

Ahora debería usar la función .on() para enlazar eventos.

Answer 3

Este es un excelente tratamiento en la Red de Desarrollo de Mozilla (MDN) de este problema para el JavaScript estándar (si no desea confiar en jQuery o entenderlo mejor en general):

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

Aquí hay una discusión sobre el 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 solo controlador para un evento
• Le da un control más detallado de la fase cuando el oyente se activa (captura frente a burbujeo)
• Funciona en cualquier elemento DOM, no solo en 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
• El código para navegadores IE heredados es simple y se incluye bajo el título "Legacy Internet Explorer y attachEvent"
• Puede incluir parámetros si encierra el controlador en una función anónima

Answer 4

Lo más parecido sería la función de enlace:

bind()

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

Answer 5

No todos los navegadores soportan la captura de eventos (por ejemplo, las versiones de Internet Explorer inferiores a 9 no) pero todos soportan el burbujeo de eventos, por lo que es la fase utilizada para vincular manejadores a eventos en todas las abstracciones de varios navegadores, incluido jQuery.

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

Answer 6

Una cosa a tener en cuenta es que los métodos de evento jQuery no activan / atrapan la load en las etiquetas de embed que contienen SVG DOM que se carga como un documento separado en la etiqueta de embed . La única forma que encontré para atrapar un evento de load en estos fue usar JavaScript sin formato.

Esto no funcionará (lo 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);