javascript - event - on click jquery class
Directo vs. Delegado-jQuery.on() (5)
Intento entender esta diferencia particular entre los manejadores de eventos directos y delegados que usan el método jonuery .on () . Específicamente, la última oración de este párrafo:
Cuando se proporciona un
selector, el controlador de eventos se denomina delegado . 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. jQuery burbujea el evento desde el objetivo del evento hasta el elemento donde está conectado el controlador (es decir, el elemento más interno al más externo) y ejecuta el controlador para cualquier elemento a lo largo de esa ruta que coincida con el selector.
¿Qué significa "ejecuta el controlador para cualquier elemento"? Hice una página de prueba para experimentar con el concepto. Pero ambos constructos siguientes conducen al mismo comportamiento:
$("div#target span.green").on("click", function() {
alert($(this).attr("class") + " is clicked");
});
o,
$("div#target").on("click", "span.green", function() {
alert($(this).attr("class") + " is clicked");
});
¿Tal vez alguien podría referirse a un ejemplo diferente para aclarar este punto? Gracias.
Escribí una publicación con una comparación de eventos directos y delegada. Comparo js puros, pero tiene el mismo significado para jquery que solo lo encapsula.
La conclusión es que el manejo de eventos delegados es para la estructura dinámica DOM donde pueden crearse elementos combinados mientras el usuario interactúa con la página (sin necesidad de enlaces) y el manejo directo de eventos para elementos DOM estáticos, cuando sabemos que la estructura no cambiará.
Para obtener más información y una comparación completa, http://maciejsikora.com/standard-events-vs-event-delegation/
El uso de controladores siempre delegados, que veo que es muy actual no es correcto, muchos programadores lo usan porque "debería usarse", pero la verdad es que los controladores de eventos directos son mejores para algunas situaciones y la opción que método de uso debe ser compatible por el conocimiento de las diferencias.
La explicación de N3dst4 es perfecta. En base a esto, podemos suponer que todos los elementos secundarios están dentro del cuerpo, por lo tanto, necesitamos usar solo esto:
$(''body'').on(''click'', ''.element'', function(){
alert(''It works!'')
});
Funciona con evento directo o delegado.
La primera forma, $("div#target span.green").on() , vincula un manejador de clics directamente a la (s) extensión (es) que coinciden con el selector en el momento en que se ejecuta el código. Esto significa que si se agregan otros tramos más tarde (o se modifica su clase para que coincida) se han perdido y no tendrán un controlador de clics. También significa que si más adelante elimina la clase "verde" de uno de los intervalos, su controlador de clic continuará ejecutándose: jQuery no realiza un seguimiento de cómo se asignó el controlador y verifica si el selector aún coincide.
La segunda forma, $("div#target").on() , vincula un manejador de clics a los div (s) que coinciden (de nuevo, esto está en contra de los que coinciden en ese momento), pero cuando se produce un clic en algún lugar la función div the handler solo se ejecutará si el clic no se produjo solo en el div sino en un elemento secundario que coincide con el selector del segundo parámetro en .on() , "span.green". Hecho de esta manera, no importa cuándo se crearon esos intervalos de hijos, al hacer clic sobre ellos todavía se ejecutará el controlador.
Por lo tanto, para una página que no agrega o cambia dinámicamente su contenido, no notará una diferencia entre los dos métodos. Si agrega dinámicamente elementos secundarios adicionales, la segunda sintaxis significa que no tiene que preocuparse por asignarles manejadores de clics porque ya lo hizo una vez en el elemento primario.
Tangencial para el OP, pero el concepto que me ayudó a desentrañar la confusión con esta característica es que los elementos vinculados deben ser padres de los elementos seleccionados .
- Bound se refiere a lo que queda de
.on. - Seleccionado se refiere al segundo argumento de
.on().
La delegación no funciona como .find (), seleccionando un subconjunto de los elementos enlazados. El selector solo se aplica a elementos secundarios estrictos.
$("span.green").on("click", ...
es muy diferente de
$("span").on("click", ".green", ...
En particular, para obtener las ventajas @N3dst4 alude a "elementos que se crean en el futuro", el elemento vinculado debe ser un elemento primario permanente . Entonces los niños seleccionados pueden ir y venir.
EDITAR
Lista de verificación de por qué .on no funciona
Razones complicadas por las cuales $(''.bound'').on(''event'', ''.selected'', some_function) pueden no funcionar:
- El elemento vinculado no es permanente . Fue creado después de llamar
.on() - El elemento seleccionado no es un hijo propio de un elemento vinculado. Es el mismo elemento.
- El elemento seleccionado evitó el burbujeo de un evento al elemento enlazado llamando a
.stopPropagation().
(Omitiendo razones menos complicadas, como un selector mal escrito).
Caso 1 (directo):
$("div#target span.green").on("click", function() {...});
== Hola! Quiero que cada span.green dentro de div # target escuche: cuando te hagan clic, haz X.
Caso 2 (delegado):
$("div#target").on("click", "span.green", function() {...});
== Oye, div # objetivo! Cuando haga clic en cualquiera de los elementos secundarios que son "span.green", haga X con ellos.
En otras palabras...
En el caso 1, cada uno de esos tramos ha recibido instrucciones individualmente. Si se crean nuevos tramos, no habrán escuchado las instrucciones y no responderán a los clics. Cada tramo es directamente responsable de sus propios eventos.
En el caso 2, solo el contenedor recibió la instrucción; es responsable de notar los clics en nombre de sus elementos secundarios. El trabajo de atrapar eventos ha sido delegado . Esto también significa que la instrucción se llevará a cabo para los elementos secundarios que se crean en el futuro.