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.
the callback accepts a single parameter: an object based on Event describing the event that has occurred
The parameter is a JavaScript Event Object. You can find the properties here https://developer.mozilla.org/en-US/docs/Web/API/Event#properties
The callback function you supply to the addEventListener function can be an anonymous function. It would look like this:
cell.addEventListener("mousemove", function(e){
cellControl(e);
});
That can be useful if you want to supply other arguments to the callback function in addition to the event object:
cell.addEventListener("mousemove", function(e){
cellControl(e, anotherArgument);
});
You can find more about the event object as mentioned in the answer from Michael. I also find it very useful to console.log the event object or just certain properties of it. For example:
function cellControl(e) {
console.log('e', e);
console.log('e.buttons', e.buttons);
if (e.buttons == 1) {
// Do things
}
}
Now if you look at the console tab in your browser's developer tools (Ctrl Shift K in Firefox) you will see the information about the event object you want so long as you mouseover the relevant element in your web page.
To address your question,
how can I find out what data different event listeners send to the functions I call?
The addEventListener() method (ie. function) will always send the event object to the callback and nothing else. The event object will be different for almost every case but the properties will be (largely or possibly totally???) the same. The values of the properties will be different of course.