jQuery equivalente ao método addEventListener do JavaScript

190

Estou tentando encontrar o equivalente jQuery desta chamada de método JavaScript:

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

Eu cheguei até:

$(document).click(select_element);

mas isso não alcança o mesmo resultado, como o último parâmetro do método JavaScript - um booleano que indica se o manipulador de eventos deve ser executado na fase de captura ou subida (de acordo com meu entendimento em http://www.quirksmode.org /js/events_advanced.html ) - é deixado de fora.

Como especificar esse parâmetro ou obter a mesma funcionalidade usando o jQuery?

— Estragar
fonte

3

A captura de eventos não é suportada pelo jQuery, pois a captura de eventos não é suportada pelo IE, que o jQuery suporta;) Você está procurando compatibilidade com o IE?

— Crescent Fresh

Obrigado, Crescent Fresh - acho que faz sentido agora. Eu preciso de compatibilidade com o IE, então suponho que preciso esquecer a fase de captura.

— Bungle

142

Nem todos os navegadores oferecem suporte à captura de eventos (por exemplo, as versões do Internet Explorer inferiores a 9 não), mas todos suportam a interferência de eventos, razão pela qual é a fase usada para vincular manipuladores a eventos em todas as abstrações entre navegadores, incluindo o jQuery.

O mais próximo do que você está procurando no jQuery está usando bind()(substituído pelo on()jQuery 1.7+) ou os métodos jQuery específicos do evento (nesse caso click(), que chama bind()internamente de qualquer maneira). Todos usam a fase de bolhas de um evento gerado.

— Russ Cam
fonte

6

Parece que o IE9 finalmente o suporta. blogs.msdn.com/b/ie/archive/2010/03/26/…

— algum dia

e por que eles não suportam a captura de eventos? Quais são as desvantagens da captura de eventos?

— Aakash

2

Só para ficar claro, você está dizendo que o que o OP quer não é possível - que você precisa usar bolhas e não pode usar a captura. Certo?

— precisa saber é o seguinte

115

A partir do jQuery 1.7, .on()agora é o método preferido de eventos de ligação, em vez de .bind():

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

A partir do jQuery 1.7, o método .on () é o método preferido para anexar manipuladores de eventos a um documento. Para versões anteriores, o método .bind () é usado para anexar um manipulador de eventos diretamente aos elementos. Os manipuladores são anexados aos elementos atualmente selecionados no objeto jQuery, portanto esses elementos devem existir no momento em que a chamada para .bind () ocorre. Para uma associação de eventos mais flexível, consulte a discussão sobre delegação de eventos em .on () ou .delegate ().

A página de documentação está localizada em http://api.jquery.com/on/

A resposta aceita foi editada para resolver isso.

— Usuário que não é usuário

51

O mais próximo seria a função de ligação:

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

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

— Ben Rowe
fonte

14

Uma coisa a notar é que os métodos de eventos do jQuery não fazer fogo / armadilha loadem embedtags que contêm SVG DOM que carrega como um documento separado na embedtag. A única maneira que encontrei para interceptar um loadevento foi usar JavaScript bruto.

Isso não vai funcionar (eu tentei on/ bind/ loadmethods):

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

No entanto, isso funciona:

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

— tbjers
fonte

1

deve-se observar que esta é a maneira correta se você não deseja substituir outros manipuladores de eventos vinculados para o (s) elemento (s).

— R3wt

o que é o $img?

— Anatol

12

Agora você deve usar a .on()função para vincular eventos.

2

$( "button" ).on( "click", function(event) {

    alert( $( this ).html() );
    console.log( event.target );

} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button>test 1</button>
<button>test 2</button>

Expandir snippet

— antelove
fonte

1

Aqui está um excelente tratamento na Mozilla Development Network (MDN) dessa questão para o JavaScript padrão (se você não deseja confiar no jQuery ou entendê-lo melhor em geral):

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

Aqui está uma discussão sobre o fluxo de eventos de um link no tratamento acima:

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

Alguns pontos-chave são:

Permite adicionar mais de um manipulador único para um evento
Dá a você um controle mais refinado da fase quando o ouvinte é ativado (captura x bolhas)
Funciona em qualquer elemento DOM, não apenas em elementos HTML
O valor "this" passado para o evento não é o objeto global (janela), mas o elemento do qual o elemento é acionado. Isso é muito conveniente.
O código para navegadores IE herdados é simples e está incluído no título "Internet Explorer herdado e attachEvent"
Você pode incluir parâmetros se colocar o manipulador em uma função anônima

— Xitalogy
fonte