usuario - pasar parametros a una funcion javascript desde html

¿Cuál es la diferencia entre una llamada de función y una referencia de función?

Question

Tengo la siguiente función

function hello() {
 alert("hi!");
}

Toma este pedazo de código:

var elem = document.getElementById("btn");
elem.onclick = hello;

Mi pregunta puede ser un poco difícil de entender, así que tenga paciencia conmigo: ¿qué diferencia EXACTAMENTE DE ESTE fragmento de código de una llamada normal, o qué hace que este fragmento de código requiera una referencia a la variable de función en lugar de una llamada normal? ( hello(); )

¿Cómo puedo saber dónde se supone que debo dar una referencia a la función y cuándo debo llamarla?

Answer 1

¿Cómo puedo saber dónde se supone que debo dar una referencia a la función y cuándo debo llamarla?

¿Necesita la función para ejecutar ahora?

A continuación, agregue el () para ejecutarlo.

¿Necesita que la función sea referenciada para que se llame más tarde?

No agregue el ().

Answer 2

¿Quieres que se ejecute AHORA? Entonces llámalo.

a=hello() significa "Llamar a hello() ASAP, y establecer su valor de retorno a".

Por otro lado, a=hello significa " a es un alias para hello . Si llama a() , obtendrá los mismos resultados que si llama hello() "

Utiliza este último para devoluciones de llamada, etc., donde quiere decirle al navegador lo que quiere que suceda después de que ocurra un evento. Por ejemplo, puede querer decir "llamar a hello() cuando el usuario hace clic" (como en el ejemplo). O, "Cuando la consulta AJAX devuelve un resultado, llame a la función de callback() en los datos devueltos".

Answer 3

Bueno, la propiedad onclick espera una referencia a una función, para que se ejecute cuando se hace clic en el elemento. Normalmente es:

element.onclick = funcRef;

o

element.onclick = function () {
    funcRef();
};

(pero, por supuesto, es mejor usar addEventListener y attachEvent )

Observe cómo ambos son referencias a funciones, no llamadas.

Cuando algo espera una referencia, no la llamas ... le asignas una referencia (primer ejemplo).

Cuando quiere llamar específicamente a una función, la llama con () (segundo ejemplo). Pero observe cómo en el segundo ejemplo, todavía hay una referencia a una función que está asignada para hacer onclick , es solo una función anónima.

Probablemente la parte más importante:

Algunas personas piensan que quieres hacer esto:

element.onclick = funcRef();

Pero eso ejecuta inmediatamente la función (debido a la () ), y asigna su valor de retorno a onclick . A menos que el valor de retorno sea una función, esto no es lo que desea.

Creo que la moraleja de la historia es que cuando quieres / necesitas algo que ejecutar en este momento, llamas a la función. Si se desea la función para su uso posterior o si se necesita almacenarla, no la llame.

Answer 4

Casi todas las declaraciones en JavaScript tienen un valor de retorno. A menos que se especifique lo contrario, las funciones en JavaScript volverán undefined cuando se las llame. Entonces, el único contexto en el que tendría sentido llamar a su función en esta declaración de asignación si fuera a devolver una función:

function hello() {
    return function() {
        alert("hi!");
    }
}

elem.onclick = hello();

Answer 5

Se necesita una referencia a su función en algún lugar sin importar cómo se llame. La diferencia aquí es que no estás llamando explícitamente a la función de hello . Está asignando una referencia a esa función al controlador de eventos onclick del nodo DOM elem para que cuando se onclick para ese Nodo, se llame a su función.

Answer 6

hola () significa que llamas a esa función, lo que significa que la función se ejecutará directamente.

mientras que cuando tienes elem.onclick = hola, esto se llama devolución de llamada. Donde no se ejecuta hola directamente, sino solo cuando se desencadena un evento determinado (en este caso, cuando hay un clic en el elemento)