Is event a global variable that is accessible everywhere inside the callback chain?

Question

I was just playing around with event listeners with DOM and Javascript and did notice this:

function chained(msg) {
    console.log(msg, event);
}

function onClick() {
    chained('the body was clicked');
}

document.body.addEventListener('click', onClick);

Now the funny thing...this will output:

"the body was clicked, (MouseEvent)"

Then I ask, why? how does it passes the event object without sending it on the chained call?

function chained(msg) {
    console.log(msg, namedEventObj); //throw error namedEventObj is not defined
}

function onClick(namedEventObj) {
    console.log(event); //outputs (MouseEvent);
    console.log(nameEventObj); //outputs (MouseEvent);
    chained('the body was clicked');
}

document.body.addEventListener('click', onClick);

Even If I declare the event obj to be passed on the onClick function as namedEventObj it will available only to onClick but not to chained function...I got this and this makes sense for me...but definitely not the event variable to be available to the chained function.

Anyone know why does it behaves like this?

The only thing I can think of is that event is in fact window.event and it makes itself available when some event dispatches and Event...but that would mean that any element could get that event information if called at the same time as the event when it triggers?

I am using Chrome 11.0.x

Elma

You are right (window.event), don't know what there is more to say about that. Of course you can access global variables from everywhere (that's why they are global). – Bassarisk

thanks Felix,I agree I just think it is a bit confusing create this "shortcut" because when you use function(event) you are thinking that you are sending that and not that it is already automatically sent and don't give the impression that it will spread through all chained function. so I believe window.event is easy to comprehend as global...but not event which in most cases coincide with the attribute name you pass, but that can't be done since everything is already inside the window anyway...and inherited :( just checked that it does not happen in Gecko tho, but persists for webkit – Elma

It might be confusing. But if there is no parameter or variable in the current function that is named event, you know it must come from a higher scope (in this case window). And if you pass it as event, then you are actually access the parameter and not window.event. So it just works how functions work :) – Bassarisk

I am getting used to it now :), it seems a good alternative for cross-browsing functionality, so you can guarantee it will also work on older versions of IE perhaps? thanks for the enlightenment here Felix. just felt crazy at the first time. – Elma

Regarding cross-browser compatibility: You will often see event handlers defined as function(event) { event = event || window.event;}. This will take window.event only if event is not defined (which is the case for older IE browsers). window.event does not work in Firefox. – Bassarisk

Answer 1

One can access the current event through window.event. Just using event is implicitly accessing window.event.

Readymade

@redgetan How do you use event in firefox? – Matrilineage

@Matrilineage event handlers will be passed an object that is the event – Outline

@redgetan You Sir! are a life saver. – Wunderlich

Answer 2

A demon of the ancient world

One of the things that are deprecated / no longer recommended but exist for decades. I wouldn't trust window.event with my life but it's pretty consistently there and sometimes it makes event handling a lot easier, saving you countless parameters to pass down the line.

• GPT4 gives you the advice to avoid it but knows that it works;
• MDN recommends against it, but shows "fully supported" for every browser;
• CanIUse warns about deprecation, but the whole chart is full of greens.

You can safely use it as long as you have a plan B for the day they remove this feature from browsers. Prepare some easy-to-apply workaround. (Could be a manually added global variable in your own myApp object, or even window itself, if you don't want to change much of the event logic.)

Probst