Diferencia entre llamadas a funciones .on ()

¿Cuál es la diferencia entre lo siguiente?

$(document).on("scroll",".wrapper1", function(){ $(".wrapper2") .scrollLeft($(".wrapper1").scrollLeft()); }); $('.wrapper1').on("scroll", function(){ $(".wrapper2") .scrollLeft($(".wrapper1").scrollLeft()); }); 

¿Cuándo debería cada función ser utilizada exactamente?

La diferencia entre estos dos es

$('.wrapper1').on("scroll", ....) vincula el evento scroll a solo aquellos elementos que están presentes en el momento de la ejecución de esta instrucción, es decir, si se agrega dinámicamente cualquier elemento nuevo con class wrapper1 después de que se ejecuta esta instrucción, el manejador de eventos no se ejecutará para esos elementos.

$(document).on("scroll",".wrapper1", ...) por otro lado registrará un manejador de eventos en el objeto de document y usará el evento de burbujeo para invocar el manejador cada vez que el desplazamiento ocurre dentro de un elemento con la clase `wrapper“, por lo que admitirá la adición dinámica de elementos.

Entonces, cuando preferir un método

puedes preferir el primer método si solo tienes un número limitado de elementos y no se agregan dinámicamente

Prefiere el segundo método si tienes muchos elementos o estos elementos se agregan dinámicamente.

El efecto será el mismo, pero la forma en que el controlador de eventos recibe el evento es ligeramente diferente.

Está utilizando .on() en cada caso, pero no se está utilizando un selector en la segunda versión. El evento se delega en primera instancia y se enlaza directamente en el segundo. La documentación de .on() indica:

Para eventos directos ,

se llama al controlador cada vez que ocurre un evento en los elementos seleccionados, ya sea que ocurra directamente en el elemento o burbujas de un elemento descendiente (interno)

Para eventos delegates ,

El controlador no se llama cuando el evento ocurre directamente en el elemento vinculado, sino solo para los descendientes (elementos internos) que coinciden con el selector

Lo que sucede es que cuando el navegador detecta un evento, este sube por el DOM . En cada elemento en el camino ascendente, jQuery llamará a los controladores de eventos que se han adjuntado. En la primera versión, el evento se propaga hasta el document antes de que jQuery compruebe si el evento se originó en un elemento class="wrapper1" . La segunda versión, el evento dejaría de burbujear antes si el evento estuviera en un elemento class="wrapper1" .

La otra diferencia es que la primera versión aún podrá vincular el controlador de eventos si .wrapper1 no existe cuando la página ha terminado de cargarse, es decir, si el elemento se agrega dinámicamente, la segunda versión no funcionará. Cuando la página se carga y jQuery ejecutado $('.wrapper1') puede no existir.

Si los elementos .wrapper1 no son dynamics, probablemente encontrará un beneficio de rendimiento (insignificante) al usar la segunda versión.

Aparte de eso, el evento de scroll no burbujea y no se puede delegar. Sin embargo, se pueden delegar nuevamente desde la documentación de .on() :

En todos los navegadores, los eventos de carga, desplazamiento y error (p. Ej., En un elemento) no burbujean. En Internet Explorer 8 y versiones inferiores, los eventos de pegar y restablecer no se disparan. Dichos eventos no son compatibles con la delegación, pero se pueden usar cuando el controlador de eventos se adjunta directamente al elemento que genera el evento.

¡Entonces la única versión que funcionaría es la segunda! Vea la demostración en DevTools Console, la salida de document scroll del document scroll nunca aparece.

La diferencia está en el primer caso en que el oyente se dirige al documento, por lo que si no tiene .wrapper1 en la página y lo agrega adicionalmente (AJAX o de alguna otra manera) el evento aún se disparará (ya que el documento siempre está allí) .

En el segundo caso, si .wrapper1 se agrega dinámicamente, el evento no se activará, incluso si está utilizando .on () ya que no tiene un elemento para vincular ese .on () a.

Dicho esto, la segunda variante debe usarse solo cuando el elemento seleccionado no se crea dinámicamente y el primero en el caso opuesto.