Skip to content
Advertisement

How to find what variables event listeners send to the functions they call?

I’m having trouble understanding event listeners and what variables they send to the function they call.

For example, I added an event listener to this cell with the intention of calling a function which checks if the mouse is pressed down while moving over an element:

cell.addEventListener("mousemove", cellControl);
function cellControl(e) {
    if (e.buttons == 1) {
        // Do things
    }
}

I was able to make this function work by finding other stack overflow answers but I don’t understand why it works. The event listener calls cellControl without passing any variables, but the function cellControl receives an object anyways which I can check for data.

Why did the event listener send this data, and how can I find out what data different event listeners send to the functions I call? I read through this page but couldn’t find the answer.

Advertisement

Answer

the callback accepts a single parameter: an object based on Event describing the event that has occurred

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_event_listener_callback

The parameter is a JavaScript Event Object. You can find the properties here https://developer.mozilla.org/en-US/docs/Web/API/Event#properties

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement