Diferencia más importante entre bind, delegate y un evento

[junihh]

Hola señores

Escribo javascript tradicional y soy muy bueno. Hace dos meses comencé a introducirme a jQuery a solicitud de mi jefe. El caso es que algo me me molesta bastante es aquello de poder hacer lo mismo de múltiples formas, lo que me resulta confuso acerca de conocer cuál es la mejor práctica.

En javascript, si quiero aplicar una función a una lista de enlaces hago lo siguiente:

Código HTML:

document.getElementsByTagName('nav').getElementsByTagName('a').onclick = function()
{
	//
};

Sin embargo, en jQuery se puede hacer lo siguiente:

Código HTML:

$('nav a').click('a',function()
{
	//
});

$('nav a').bind('click',function()
{
	//
});

$('nav').on('click','a',function()
{
	//
});

$('nav').delegate('a','click',function()
{
	//
});

Se que para muchos que gustan de jQuery ven eso como "ventaja". En mi caso lo veo como un problema porque si una alternativa se vuelve obsoleta, el programador quizás ni cuenta se de si no lee la documentación. Y ni hablar de gente como yo acostumbrada a un sólo método para hacer lo que necesito.

¿Cuál es el mejor método o la mejor práctica para aplicar una función a cada enlace según mi ejemplo?

[Sirikon]

Mira es muy sencillo y resulta bastante útil:

bind: Da la posibilidad de en una misma función meter varios eventos con sus respectivos resultados, puedes meter en un mismo bind el qué pasaría al hacer click, al pasar por encima, al hacer focus, etc.

A demás permite quitar estos eventos cuando queramos con .unbind()

click: El resultado es idéntico a Bind sólo que permite en este caso solo el click, esto es para cuando no necesitas mucho para hacer un simple evento de click

delegate: Esto es súmamente interesante ya que es lo más útil del mundo cuando quieres ponerle listeners o eventos a elementos dinámicos, osea elementos que no estaban en el momento de implantarse el listener, esto hace que por así decirlo "recargue" todos los elementos a los que puede afectar cada vez que es llamado

Y esto lo hace especificandole un área de efecto, por ejemplo:

Código Javascript:

$('div#nav').delegate('a','click',function(){
  alert("Hola");
})
 

Esa función hará que, por muchos elementos <a> que aparezcan o desaparezcan dentro del div con id nav, se lanzará la función, (En este caso, un alert de "Hola") sin necesidad de estar quitando y poniendo listeners

live: Es exactamente igual que el delegate, solo que con delegate primero especificas un área de efecto y luego el tipo de elementos a los que afecta, en live no especificas un área de efecto y te toma por defecto el documento entero, esto es bastante poco eficiente y evitable si sabes usar bien el delegate

Cualquier duda pregunta, te ayudaré en lo que pueda ^^

Saludos!

[junihh]

Pues más que ilustrativo tu respuesta, me ha ayudado bastante. Busqué un poco a ver eso que dices de múltiples eventos a bind y me gustó, simplifica las cosas. Muchas gracias por tu ayuda Sirikon.

[Sirikon]

Me alegro de que te sirviera!, para eso estamos ^^

Saludos!