Estaba transfiriendo todo mi código JavaScript a un archivo externo:
Uno de los códigos en línea era así:
onclick="nextPrev(-1)" ; onclick="nextPrev(1)"
El método que probé fue:
document.getElementById("nextPrev").addEventListener("click", nextPrev(1))
document.getElementById("nextPrev").addEventListener("click", function(){nextPrev(1)})
La segunda línea de código funciona bien, es decir, se activa al hacer clic en el botón. Mientras que el primer código es un tipo de automático (significa que el valor se muestra sin ningún evento de clic).
Así que quería saber la diferencia entre los dos métodos que utilicé en un archivo externo. Además, si hay algún otro método para escribir onclick="nextPrev(1)" en un archivo externo, no dude en señalarlo.
Aquí hay un fragmento de trabajo:
function nextPrev(e){ document.getElementById("demo").innerHTML = e; } document.getElementById("nextBtn1").addEventListener("click", nextPrev1(1)) function nextPrev1(e){ document.getElementById("demo1").innerHTML = e; } document.getElementById("nextBtn2").addEventListener("click", function() { nextPrev2(1) }) function nextPrev2(e){ document.getElementById("demo2").innerHTML = e; } <button type="button" id="nextBtn" onclick="nextPrev(1)">onclick="nextPrev(1)"</button> <div id="demo"></div> <button type="button" id="nextBtn1">func(var)</button> <div id="demo1"></div> <button type="button" id="nextBtn2">function(){func(var)}</button> <div id="demo2"></div>Gracias por la ayuda de antemano
document.getElementById("nextPrev").addEventListener("click", nextPrev(1)) Esto llamará a nextPrev(1) inmediatamente (dando así la impresión de que el evento se ejecuta inmediatamente) y establecerá su valor devuelto como la devolución de llamada del detector de eventos.
document.getElementById("nextPrev").addEventListener("click", function(){nextPrev(1)}) Esto establecerá la devolución de llamada del detector de eventos en una función que llama a nextPrev(1) cada vez que se ejecuta el evento. Cada vez que se activa el evento, se llama a la función y solo entonces se nextPrev(1) .
La diferencia es tan simple como se ilustra a continuación:
function callme(){ console.log("hello"); } //Does not run until callmeWrapper is executed function callmeWrapper(){ callme(); } //Runs automatically callme(); El segundo argumento de addEventListener tiene que ser la función que se supone que debe ejecutarse.
En este caso: document.getElementById("nextPrev").addEventListener("click", function(){nextPrev(1)})
cuando está ajustando una definición de función, la función nextPrev no se ejecuta. Aquí, cuando se encuentra esta línea en el código, la función contenedora se adjunta como un controlador de eventos.
En este caso: document.getElementById("nextPrev").addEventListener("click", nextPrev(1))
no adjuntas nada. Aquí, tan pronto como se encuentra esta línea en el código, se ejecuta la función. Y el valor de retorno ( undefined de forma predeterminada) se asigna como un controlador de eventos. Eso no hará nada al hacer clic.