Javascript Event Object

Question

In traditional event registration model:

function foo(e){console.log(e.type)}
document.getElementById("#id").onclick=foo;//registered event handler

But in inline event registration model:

<a href="#" onclick=foo(event)>clck</a>  

console.log(a.click)===function click(){foo(event)}

Can't event object be used directly within the function foo rather than pass as a function argument.Since event object being used within the click function is not passed by the browser we are manually passing it.Why passing event object within the event handler function dont work?

event isn't defined in the global context which is how you are trying to access it to pass it to your function. Anyway, don't use inline events. — Evan Davis
– Evan Davis, Commented May 2, 2013 at 14:18
event is defined in global context in some browsers (Internet Exporter, IIRC). Attributes do need to be quoted, though. @Maizere, you're counting on the help of random strangers who aren't getting paid to help you. Try waiting more than 18 minutes before you start complaining that no one has answered you yet - especially when it's the middle of the night in America, where many of SO's users are. — Adrian
– Adrian, Commented May 2, 2013 at 14:21
exaxtly, don't use inline events :) but try setting foo("bar") and you should receive bar in your function as a parameter. — intuitivepixel
– intuitivepixel, Commented May 2, 2013 at 14:22
@Mathletics i was asking for the reason .There can be cases where we need inline event registration model — Maizere Pathak.Nepal
– Maizere Pathak.Nepal, Commented May 2, 2013 at 15:58

Felix Kling · Accepted Answer · 2013-05-02 18:34:12Z

2

Since event object being used within the click function is not passed by the browser we are manually passing it.

That's not correct. The browser (at least W3C compatible browser) pass the event object to the event handler.

The equivalent to

onclick="foo()"

is

elem.onclick = function(event) {
    foo();
};

The browser creates a function with event as first parameter and uses the value of the attribute as body of the function.

You have to pass the event object explicitly to foo because that's how JavaScript functions work. If you call a function inside another function, the outer function's parameters are not automatically passed to the inner function (that would be really confusing IMO).
Simpler example:

function foo(a) {
    bar();
}

function bar(a) {
    alert(a); // will show `undefined`
}

foo(42);

answered May 2, 2013 at 18:34

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

2 Comments

Maizere Pathak.Nepal Over a year ago

what will happen if i declare a var event in window context or within the function itself,will this declararion makes difference

Felix Kling Over a year ago

You might want to provide a proper example, I would say no, it won't make a difference (as in it won't give you access to the event object).

Collectives™ on Stack Overflow

Javascript Event Object

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related