Estoy confundido acerca de los eventos y los controladores de eventos, a veces llamamos a una función con un controlador de eventos y le ponemos un parámetro y otras veces no. ¿Cuándo pongo parámetros y cuándo es necesario?
Aquí hay un ejemplo:
<!DOCTYPE html> <html> <body> <h2 onclick="showCoords(event)">Click this heading to get the x (horizontal) and y (vertical) coordinates of the mouse pointer, relative to the screen, when it is clicked.</h2> <p><strong>Tip:</strong> Try to click different places in the heading.</p> <p id="demo"></p> <script> function showCoords(event) { var x = event.screenX; var y = event.screenY; var coords = "X coords: " + x + ", Y coords: " + y document.getElementById("demo").innerHTML = coords; } </script> </body> </html>donde showCoords tiene un parámetro llamado event. Este código es de W3Schools.
Cuando usa un atributo de evento intrínseco (que tiene todo tipo de problemas ), el event variable hace referencia al objeto de evento global obsoleto .
Así que si haces esto:
<button onclick="foo(event)"> function foo(event) { } window.event en la función onclick y lo pasas como argumento a la función foo .
Mientras que si haces esto:
<button onclick="foo()"> function foo() { console.log(event) } Luego lees window.event directamente en la función foo .
Cuando usa addEventListener (el enfoque moderno para vincular eventos que se introdujo a fines del siglo pasado):
function foo(event) { console.log(event) } document.querySelector('button').addEventListener('click', foo); … entonces la función de escucha de eventos ( foo ) pasará a un objeto de evento ( no obsoleto).