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.

Answer 1

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();