Pass the event to the callback within the event listener that triggered it?

JavaScript
1

Hi…
Not entirely sure what that means or why one would want to do it. But i really need to understand this procedure(if such a thing exist) for a test i’m taking
Javascript genies Help!

2

Not entirely understanding the question, but a quick overview of how events in JS work:

We have events, like click or mouseover or keyup or focus, that can be applied to elements of your page. So a click handler might go like this:

let myButton = document.querySelector("#my-button");
myButton.addEventListener("click", myButtonClickHandler)

Now, myButtonClickHandler is the callback function that will be used when the button gets a click. And yes, there is a default Event object that is passed to that automatically:

function myButtonClickHandler(eventObj){
  // We can prevent any other default  actions on that button like this:
  eventObj.preventDefault();

  // in the event object, Event.target is the thing that actually got clicked
  let clickedEl = eventObj.target;

  if (clickedEl.value == 'Shoes'){
    console.info("Hey! You clicked SHOES! Nice!");
  }
}

So we have this nifty Event object with information about that event: in a keyup handler, you might use Event.which to determine which key was pressed, for example.

Remember, the MDN (Mozilla Developers) are your friend, and most of the answers to questions like this live there: https://developer.mozilla.org/en-US/docs/Web/API/Event

2 Likes
3

Thanks this has been useful

4

Thank you so much. I have a problem. I want to pass other parameters into the myButtonClickHandler function. How do i go about it?

So i can get it from myButtonClickHandler function

5

In a word, you can’t really. An event listener takes exactly one parameter, the Event object. The way you’ve written this:

myButton.addEventListener("click", myButtonClickHandler(event, parameter1, parameter2, parameterN) );

// this is equivalent to:
myButton.addEventListener("click", function(event, parameter1, parameter2, parameterN){
  // do something with that event...
}() ); // Note the trailing parentheses! 
// This is being immediately run, and won't do what I want.

… what you’re actually saying is “run and evaluate this inner function (myButtonClickHandler(...)) and assign whatever value it returns to this event.” It is immediately executed. What I did in mine was:

// If you look at the function inside the parentheses, I'm passing
//   the function as a reference, rather than executing it.
myButton.addEventListener("click", myButtonClickHandler );

// this would be the same as:
myButton.addEventListener("click", function(event){
  // do something with that event
} );

So two things to note - first, you are immediately executing the function with your code, and that’s not going to give you the result you want, and second, an event listener takes a very particular format: it only takes one parameter, and that one is an Event object.

Of course, that’s more a “guideline…”

We have a way around that. Suppose we had a function that we wanted to be able to pass in parameters, and we wanted that to happen when the event was triggered. The easiest solution would simply be to wrap our function in another function. The wrapper is the event handler, and our function inside there can take whatever we might want as parameters:

function handleClickWithMoreParams(evt, ...args){
  // this function takes the event, and also any number of
  //   additional arguments. These are now in the args array.
}

myButton.addEventListener("click", function(evt){
  // here, we can use our custom function. We can include
  //  any custom parameters we might like, as it is no longer
  //  the event handler itself.
  handleClickWithMoreParams(evt, param1, param2, paramN); 
})

Now, this is hardly ideal, as we are referencing variables inside that click handler that may or may not exist, but for what you’re trying to do, it should get you there.

6

Thanks, this has been really helpful. But I have this question: how come “event” seems to act like a javascript keyword, similar to the “this” keyword, yet is not technically a javascript keyword? I found that this code works normally:

document.getElementById("someId").addEventListener("click",  function() { console.log(event); 
} );

even though the word “event” was not passed into the function as a variable. I found that the code will work normally when it’s written function(event) {...} as well. However, the code will not work with function() {console.log(x)}.

So, is “event” a keyword or not?

7
  • Event is a constructor. It means it will create an event and returning it to the caller of the event. You can use it to check if there is a keyCode event which means if a specific key on a keyboard is pressed. ex:
//This will check if a key is fully pressed up in the page.
window.addEventListener("keyup", function (event) {
/*then it checks if it is the Enter key. It knows because the 
the keycode for Enter in JavaScript is '13'*/
if(event.keyCode === 13) {
//If it is then it will alert the user
alert("Enter is pressed")
}
})
  • You can check out all the keyCodes here:
  • I’m not going to be able to explain this in detail but, you can check it out here:
1 Like
8

Without seeing the rest of your code, I might guess that somewhere higher up the “variable namespace tree”, someone has defined an event.

Short answer, no. event is not a keyword in javascript. Event is, but not event.