Why does javascript handleEvent method have access to event with event parameter omitted? [duplicate]

Question

According to MDN doc handleEvent method has event as its single parameter, however it this example:

html code:

<button id="btn">Click here!</button>

javascript code:

const buttonElement = document.getElementById('btn');

buttonElement.addEventListener('click', function () {
  alert(event.type);
});

The callback handleEvent function has no parameters yet can access event (it alerts 'click').

How does it work?

Is there any reference explicitly state that event parameter can be omitted?

Thx @melpomene that perfectly solved my question 1 but do you know the answer of question 2? — mzoz
– mzoz, Commented May 8, 2019 at 15:46
That we can use function(no parameter) that doesn't comply with handleEvent function signature? — mzoz
– mzoz, Commented May 8, 2019 at 15:48
Oh, JavaScript doesn't check parameter lists. At all. You can just ignore incoming arguments or define extra parameters (they'll be undefined). — melpomene
– melpomene, Commented May 8, 2019 at 15:54

Ian · Accepted Answer · 2024-02-16 15:55:01Z

5

In JavaScript, when you reference a variable, it will first look in the local scope before checking the global scope. In your browser, all globally scoped variables are properties of the window object. Looking up window.event yields the following article: https://developer.mozilla.org/en-US/docs/Web/API/Window/event. Notably:

The read-only Window property event returns the Event which is currently being handled by the site's code. Outside the context of an event handler, the value is always undefined.

This means that any time you are currently handling an event, the browser also binds that event to the global scope.

It should be noted that, as mentioned in the article, actually taking advantage of this is a bad idea. The value is not always what you would expect, and using global variables in general is not preferred.

As for your second question: Any parameter of any callback function can be omitted as long as you don't plan to use it in your handling, and if you do include it you can name it what you like. In this case, it just so happens that there is a global variable that has the same name as the name commonly used for that parameter. The exception to this is that you do have to define all previous parameters to access later ones.

Some examples:

// This is OK - you don't have to call the passed event "event"
buttonElement.addEventListener('click', function (ev) {
  alert(ev.type);
});

// This is not OK - the global variable is named "event" so "ev" in this case is undefined
buttonElement.addEventListener('click', function () {
  alert(ev.type);
});

// This is OK but not preferred because it uses the global "event" variable
buttonElement.addEventListener('click', function () {
  alert(event.type);
});

// This is fine - `event` overrides (shadows) the global variable so the local reference gets used
buttonElement.addEventListener('click', function (event) {
  alert(event.type);
});

// This the same as the preceding example
buttonElement.addEventListener('click', function () {
  alert(window.event.type);
});

edited Feb 16, 2024 at 15:55

answered May 8, 2019 at 15:46

Ian

6,2426 gold badges46 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

melpomene Over a year ago

Also, it doesn't work at all in older Firefox versions and is disabled by default in newer versions.

Ian Over a year ago

" disabled by default in newer versions" I'm running 66 and it works on my machine. How new?

melpomene Over a year ago

Oh, hah. Looks like they've been fully enabled in 66: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/…

mzoz Over a year ago

Thx Ian but I'm not very convinced with 'Any parameter of any function can be omitted', you can see optional parameters are explicitly denoted as 'optional' in other MDN docs like developer.mozilla.org/en-US/docs/Web/API/EventTarget/…

Ian Over a year ago

@mzoz I guess I didn't phrase that very well. Essentially if you are providing a callback function, you don't have to handle every passed parameter - if you don't add a matching parameter for them, they will just be ignored. That's because the function you're providing the callback to is just calling your callback, and when you call a function, you can pass as many arguments as you want - extras will just be ignored. Ie, alert only takes one argument, but you can provide 4 - the last 3 will be ignored. alert("1","2","3","4") just alerts "1".

|

Collectives™ on Stack Overflow

Why does javascript handleEvent method have access to event with event parameter omitted? [duplicate]

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related