javascript - saber - ¿Cómo puedo pasar argumentos a los manejadores de eventos en jQuery?
pasar parametros javascript onclick (5)
Hilo viejo, pero con fines de búsqueda; tratar:
$(selector).on(''mouseover'',...);
... y mira el parámetro "datos": http://api.jquery.com/on/
p.ej:
function greet( event ) {
alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {name: "Karl"}, greet );
$( "button" ).on( "click", {name: "Addy"}, greet );
Con código jQuery como:
$("#myid").click(myfunction);
function myfunction(arg1, arg2) {/* something */}
¿Cómo paso argumentos a myfunction
mientras uso jQuery?
La forma más simple es hacerlo de esa manera (suponiendo que no desea que la información del evento pase a la función) ...
$("#myid").click(function() {
myfunction(arg1, arg2);
});
jsFiddle .
Esto crea una función anónima, que se invoca cuando se activa el evento click
. Esto a su vez llamará a myfunction()
con los argumentos que proporcione.
Si desea mantener ThisBinding
(el valor de this
cuando se invoca la función, establecerlo en el elemento que desencadenó el evento), luego llame a la función con call()
.
$("#myid").click(function() {
myfunction.call(this, arg1, arg2);
});
jsFiddle .
No puede pasar la referencia directamente en la forma que indica su ejemplo, o su único argumento será el objeto de event
jQuery .
Si desea pasar la referencia, debe aprovechar la función proxy()
jQuery (que es un contenedor cross browser para Function.prototype.bind()
). Esto le permite pasar argumentos, que están vinculados antes del argumento del event
.
$("#myid").click($.proxy(myfunction, null, arg1, arg2));
jsFiddle .
En este ejemplo, myfunction()
se ejecutará con ThisBinding
intacto ( null
no es un objeto, por lo que se usa el valor normal del elemento que desencadenó el evento), junto con los argumentos (en orden) arg1
, arg2
y finalmente el objeto de event
jQuery, que puede ignorar si no es necesario (ni siquiera lo asigne a los argumentos de la función).
También puede utilizar los data
del objeto de event
jQuery para pasar datos, pero esto requeriría modificar myfunction()
para acceder a él a través de event.data.arg1
(que no son argumentos de funciones como su pregunta menciona), o al menos presentar un manual función proxy como el ejemplo anterior o una generada usando el último ejemplo.
aunque ciertamente debería usar la respuesta de Alex, el método de "vinculación" de la biblioteca prototipo se ha estandarizado en Ecmascript 5, y pronto se implementará en los navegadores de forma nativa. Funciona así:
jQuery("#myid").click(myfunction.bind(this, arg1, arg2));
Sencillo:
$(element).on("click", ["Jesikka"], myHandler);
function myHandler(event){
alert(event.data); //passed in "event.data"
}
$("#myid").on(''click'', {arg1: ''hello'', arg2: ''bye''}, myfunction);
function myfunction(e) {
var arg1 = e.data.arg1;
var arg2 = e.data.arg2;
alert(arg1);
alert(arg2);
}
//call method directly:
myfunction({
arg1: ''hello agian'',
arg2: ''bye again''
});
También le permite vincular y desvincular manejadores de eventos específicos usando los métodos de encendido y apagado.
Ejemplo:
$("#myid").off(''click'', myfunction);
Esto desvincularía el controlador myfunction de #myid