¿Leyó la documentación o realizó una búsqueda en este sitio? ¿Debería haber unos pocos millones de respuestas para elegir?
Adeneo
9
Obtendrá hipopótamos "hambrientos de puntos" respondiendo esto, a pesar de que está claramente documentado. El primer código dice "cuando se hace clic en el documento, si es algo con el ID de #id, active este código". El segundo dice "cuando se hace clic en cualquier cosa que exista actualmente con el ID de #id, active este código". La primera es para asignar el evento a elementos que no existen en ese momento, pero sí en el futuro. El segundo no disparará para ningún elemento agregado más tarde.
Reincorporación a Monica Cellio
6
Hice ambas cosas, pero obviamente no lo suficiente. Una búsqueda es difícil porque no sabía qué buscar. No sabría cómo se llama esto.
Styphon
1
Se explica en la documentación de on(). Solo un poco de lectura para hacer :)
Reincorporar a Monica Cellio
8
Si esto debe cerrarse porque no es constructivo o porque existe documentación para ello, entonces aproximadamente el 99,9% de las preguntas de stackoverflow deben cerrarse, en cuyo caso, buena suerte para encontrar el 0,1% restante, ya que probablemente saldría del negocio. Lo mismo ocurre con el comentario despectivo de "hipopótamos hambrientos".
cesoide
Respuestas:
68
El primer ejemplo demuestra la delegación de eventos . El controlador de eventos está vinculado a un elemento superior en el árbol DOM (en este caso, el document) y se ejecutará cuando un evento alcance ese elemento que se originó en un elemento que coincide con el selector.
Esto es posible porque la mayoría de los eventos DOM burbuja hasta el árbol desde el punto de origen. Si hace clic en el #idelemento, se genera un evento de clic que se propagará a través de todos los elementos ancestros ( nota al margen: en realidad, hay una fase antes de esto, llamada 'fase de captura', cuando el evento desciende del árbol hasta el objetivo ). Puede capturar el evento en cualquiera de esos antepasados.
El segundo ejemplo vincula el controlador de eventos directamente al elemento. El evento seguirá burbujeando (a menos que lo evites en el controlador) pero como el controlador está vinculado al objetivo, no verás los efectos de este proceso.
Al delegar un controlador de eventos, puede asegurarse de que se ejecute para elementos que no existían en el DOM en el momento del enlace. Si su #idelemento fue creado después de su segundo ejemplo, su controlador nunca se ejecutaría. Al vincularse a un elemento que sabe que definitivamente está en el DOM en el momento de la ejecución, se asegura de que su controlador realmente se adjuntará a algo y se puede ejecutar según corresponda más adelante.
Me gustaría saber cuál delega el evento más rápido. Quiero mejorar la calidad de mi código jquery. Dado que el evento de delegación de DOM lleva poco tiempo que el evento de delegación de #Element. Por favor comparta sus pensamientos
Arun G
1
@James Allardice: usando el último método, $(document).on('click', $('#id'), function()...¿cómo puedo usar $(this)para hacer referencia $('#id')? $(this)está haciendo referencia actualmente document, lo cual entiendo.
// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
$(this).remove()
});
Ahora, ¿qué pasa si agregamos una myTask nuevamente?
$('#myTask').append('<li>Answer this question on SO</li>');
Hacer clic en este elemento de myTask no lo eliminará de la lista, ya que no tiene ningún controlador de eventos vinculado. Si en cambio lo hubiéramos usado .on, el nuevo artículo funcionaría sin ningún esfuerzo adicional de nuestra parte. Así es como se vería la versión .on:
$('#myTask').on('click', 'li', function (event) {
$(event.target).remove()
});
Resumen:
La diferencia entre .on()y .click()sería que .click()puede que no funcione cuando los elementos DOM asociados con el .click()evento se agregan dinámicamente en un punto posterior, mientras que .on()se pueden usar en situaciones en las que los elementos DOM asociados con la .on()llamada pueden generarse dinámicamente en un momento posterior.
on(). Solo un poco de lectura para hacer :)Respuestas:
El primer ejemplo demuestra la delegación de eventos . El controlador de eventos está vinculado a un elemento superior en el árbol DOM (en este caso, el
document) y se ejecutará cuando un evento alcance ese elemento que se originó en un elemento que coincide con el selector.Esto es posible porque la mayoría de los eventos DOM burbuja hasta el árbol desde el punto de origen. Si hace clic en el
#idelemento, se genera un evento de clic que se propagará a través de todos los elementos ancestros ( nota al margen: en realidad, hay una fase antes de esto, llamada 'fase de captura', cuando el evento desciende del árbol hasta el objetivo ). Puede capturar el evento en cualquiera de esos antepasados.El segundo ejemplo vincula el controlador de eventos directamente al elemento. El evento seguirá burbujeando (a menos que lo evites en el controlador) pero como el controlador está vinculado al objetivo, no verás los efectos de este proceso.
Al delegar un controlador de eventos, puede asegurarse de que se ejecute para elementos que no existían en el DOM en el momento del enlace. Si su
#idelemento fue creado después de su segundo ejemplo, su controlador nunca se ejecutaría. Al vincularse a un elemento que sabe que definitivamente está en el DOM en el momento de la ejecución, se asegura de que su controlador realmente se adjuntará a algo y se puede ejecutar según corresponda más adelante.fuente
$(document).on('click', $('#id'), function()...¿cómo puedo usar$(this)para hacer referencia$('#id')?$(this)está haciendo referencia actualmentedocument, lo cual entiendo.Considere el siguiente código
<ul id="myTask"> <li>Coding</li> <li>Answering</li> <li>Getting Paid</li> </ul>Ahora aqui va la diferencia
// Remove the myTask item when clicked. $('#myTask').children().click(function () { $(this).remove() });Ahora, ¿qué pasa si agregamos una myTask nuevamente?
$('#myTask').append('<li>Answer this question on SO</li>');Hacer clic en este elemento de myTask no lo eliminará de la lista, ya que no tiene ningún controlador de eventos vinculado. Si en cambio lo hubiéramos usado
.on, el nuevo artículo funcionaría sin ningún esfuerzo adicional de nuestra parte. Así es como se vería la versión .on:$('#myTask').on('click', 'li', function (event) { $(event.target).remove() });Resumen:
La diferencia entre
.on()y.click()sería que.click()puede que no funcione cuando los elementos DOM asociados con el.click()evento se agregan dinámicamente en un punto posterior, mientras que.on()se pueden usar en situaciones en las que los elementos DOM asociados con la.on()llamada pueden generarse dinámicamente en un momento posterior.fuente