Passing a function pointer to an event in JavaScript

Question

I understand when passing a function pointer to an event handler you cannot invoke the function block with parentheses or the return value of that function will be assigned to the event handler. I tried this and I'm confused on how it works?

window.onload = alert("Hello, World.");

I can see how this works:

window.onload = function () { alert("Hello, World!"); };

The literal function is not self-invoked leading to no return value and is only invoked once the onclick-event is invoked.

Edit 1: I don't want to achieve anything with this. I just want to understand how window.onload = alert("Hello, World."); works perfectly and how window.onload = show_message("Hello, World."); doesn't work?... Considering that show_message is actually a function.

Edit 2: Some user is claiming the onload event handler to work with parentheses on any function. I do not think this works like it should because the function is invoked ignoring the event handler and the return value of that function is assigned to the event handler. Most functions do not return anything so (undefined or null) will be assigned to the event handler.

Look at the code below:

var button = document.getElementById("button");

function test() {
    str = "works";
    console.log(str);
}

button.onclick = test;

Assume there is a button element with the id of button assigned to it. This will only work if test is not invoked with parentheses (button.onclick = test();). Test will only run once and undefined will be assigned to onclick.

Edit 3: It looks like a return value is not assigned to an event handler if the function is invoked. It always writes out null to the console when I use console.log.

I didn't grasp your question. This window.onload = alert("Hello, World."); doesn't really work as it should. — Anurag
– Anurag, Commented Aug 11, 2012 at 7:29
It works for me in Google Chrome? I created a HTML file with this inline code and it worked perfectly like the second one. What do you mean by you didn't grasp my question? — Codist
– Codist, Commented Aug 11, 2012 at 7:31
I don't understand where your problem is, what do you want to achieve? — dan-lee
– dan-lee, Commented Aug 11, 2012 at 7:34
Can you paste the entire inline code that causes the onload to work? The code posted above does not indicate that the code is inlined. And the reason inline code works is because it is wrapped inside a function as a convenience. — Anurag
– Anurag, Commented Aug 11, 2012 at 7:38
I don't want to achieve anything. I just want to understand how window.onload = alert("Hello, World."); works perfectly and how window.onload = show_message("Hello, World."); doesn't work?... Considering that show_message is actually a function. — Codist
– Codist, Commented Aug 11, 2012 at 7:38

bjornd · Accepted Answer · 2012-08-11 09:18:03Z

2

Nice question. Actually it does not work as you expect it to work. It's just illusion that it works that way. When you run:

window.onload = alert("Hello, World.");

The right part of the statement is executed and alert is shown, but the window on load handler is not set up to some function, null will be assigned to it, since this is what alert returns.

By the way even if you call the method with parentheses you can return function from it to assign to the event handler:

var button = document.getElementById("button");

function test() {
    str = "works";
    console.log(str);
    return function(){console.log('button clicked');}
}

button.onclick = test();

edited Aug 11, 2012 at 9:18

answered Aug 11, 2012 at 7:47

bjornd

23k4 gold badges59 silver badges74 bronze badges

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

3 Comments

Codist Over a year ago

Null looks like what is always assigned to it no matter what the function returns. I think I understand. Please look at Edit 2 to see if I'm correct.

bjornd Over a year ago

You are partially correct. If you return some function from the test method it will work correctly.

Codist Over a year ago

Yes that will work because it has an function code block (that is returned) to invoke when the button is clicked.

xdazz · Accepted Answer · 2012-08-11 07:48:06Z

2

window.onload = alert("Hello, World.");, you saw the alert works just because it alert when it execute, and assign the result (undefined) to window.onload.

answered Aug 11, 2012 at 7:48

xdazz

161k38 gold badges255 silver badges278 bronze badges

Collectives™ on Stack Overflow

Passing a function pointer to an event in JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related