Una sinfonía en C#

Un pequeño aporte a la comunidad de habla hispana.

Mitos de jQuery: Es lo mismo usar $.click que $.bind(“click”) ?

 

http://dsc.discovery.com/fansites/mythbusters/top-ten/2009-mythbusters-moments/gallery/top-mythbusters-moments-intro.jpg

El otro día durante cierto curso me hicieron una pregunta con un argumento que escuché otras veces, básicamente era así:

“Es cierto que no es lo mismo usar $.click(fn) que $.bind(“click”, fn)?”

Agregando además:

“Me dijeron que nunca use $.bind(“click”, fn) porque agrega el mismo evento varias veces y $.click(fn) no”

Bien, la respuesta que di, es un rotundo, no, usar $.click(fn) es lo mismo que usar $.bind(“click”, fn), de hecho todos estos helpers de eventos lo único que hacen es ahorrarnos escribir el primer parámetro de $.bind.

Pero no nos quedemos con lo que yo digo, vamos a ver el código de jQuery asociado a la función $.click(fn) y no nos va a quedar duda.

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
	"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
	"change select submit keydown keypress keyup error").split(" "), function( i, name ) {

	// Handle event binding
	jQuery.fn[ name ] = function( data, fn ) {
		if ( fn == null ) {
			fn = data;
			data = null;
		}

		return arguments.length > 0 ?
			this.bind( name, data, fn ) :
			this.trigger( name );
	};

	if ( jQuery.attrFn ) {
		jQuery.attrFn[ name ] = true;
	}
});

Básicamente lo que hace es definir un string con todos los nombres de los helpers de eventos, después hace un split a partir de el caracter espacio, el array resultante se itera un jQuery.each. dentro del bucle está la explicación, primero agrega la función a jQuery.fn (que apunta el prototipo), es decir, al hace

jQuery["click"] = function....

Está agregando la función click que después podemos invocar con $.click(fn), el cuerpo de la función llama a bind utilizando el mismo string, en nuestro caso click (en caso de no encontrar argumentos simplemente dispara el evento con trigger, como si hiciéramos $.click() )

return arguments.length > 0 ?
	this.bind( name, data, fn ) :
	this.trigger( name );

 

En definitiva, es exactamente lo mismo usar click que bind.

ACLARACIÓN: El uso de bind ha sido deprecado si bien sigue existiendo en la librería, en su lugar se utiliza “on”, de hecho al código de jQuery 1.8.1 sería:

	return arguments.length > 0 ?
		this.on( name, null, data, fn ) :
		this.trigger( name );

Sin embargo esto no significa que click no sea igual a bind, simplemente bind se cambió por on por motivos que voy a explicar en otro post.

Hasta la próxima.

Loading