Why window.addEventListener does not work?

Question

On the window.onload event, I would like a function to be called. If I define it as given below, the function does not get called.

try {
    window.addEventListener("load", initialiseTable, false);
} catch(e) {
    window.onload = initialiseTable;
}

var initialiseTable = function () {
    console.log("hello world!!");
};

but if I change the function declaration to

function initialiseTable() {
    console.log("hello world!!");};

it works, any idea?

I'd say the problem is the execution order as `initialiseTable` is used to previous to declaration — Claudio Redi, Jun 20 '13 at 15:44
Take a look here http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname — Iurii.K, Jun 20 '13 at 15:47
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Scope_Cheatsheet#function_oddities — Shmiddty, Jun 20 '13 at 16:06
Late comment, but this is why you should please provide info rather than linking to it. That developer.mozilla.org link is no good anymore, no clue what it used to say. — John Smith, May 02 '19 at 07:03

taiansu · Accepted Answer · 2013-06-20T16:02:35.907

6

While you using var x = function(){} to declare functions, it should be declare before you call the function.

By function x (){}, x will exist in current scope, no matter how later it declare. Because such side effect, the var x = function(){} are more recommended. For example:

var user = 'alien';
if( user == 'alien') {
    function salute () { console.log("Welcome to Earth!"); }
} else {
    function salute (){ console.log("Good day!"); }
}

The salute() will print Good day! anyway, even though it not we want at all.

edited Jun 20 '13 at 16:02

answered Jun 20 '13 at 15:46

taiansu

2,735
2
22
29

you are star, thanks!! – 101V Jun 20 '13 at 15:50
`load` wasn't working even with the function declaration. I was using jQuery, so replaced the code with `$(window).on('load', function(){ loadMethod(); }); and it worked. – Prasanna Jathan Dec 21 '18 at 06:49

score 2 · Answer 2 · edited May 23 '17 at 10:29

2

Declare the function before.

var initialiseTable = function () {
    console.log("hello world!!");
};
try {
    window.addEventListener("load", initialiseTable, false);
} catch(e) {
    window.onload = initialiseTable;
}

For more information about declaring a function read this: var functionName = function() {} vs function functionName() {}

edited May 23 '17 at 10:29

Community

1
1

answered Jun 20 '13 at 15:44

Edorka

1,781
12
24

score 1 · Answer 3 · answered Jun 20 '13 at 15:45

1

Just put the function initialiseTable to the first position, eg:

var initialiseTable = function (){ /*[...]*/ }

After continue calling.

answered Jun 20 '13 at 15:45

Mystic

381
1
13

Esailija · Answer 4 · 2013-06-20T16:07:43.463

Since you come from C#, the difference is a lot like:

class A {
    public int method2() {
        //I can call method1 even though it *declared* later below
        int a = method1(); 
    }

    public int method1() {

    }
}

vs

class B {
    public int method2() {
        bool a = method1(3); //I can't call it because it is *assigned* later below.
                         //In fact I cannot even compile it 
        Func<int, bool> method1 = x => x == 3;
    }
}

You may notice the difference in javascript, if you look at:

function a() {

}

There is no assignment anywhere.

Where as with var a = function(){} there is obviously assignment and it is similar to the latter C# example.

Vivek Sadh · Answer 5 · 2013-06-20T15:53:32.253

Function declaration should always precede its call.

At this line:-

window.addEventListener("load", initialiseTable, false);

initialiseTable is not known so it should be placed after function definition. Actually function statement causes its identifier to be bound before anything in its code-block* is executed.Function declarations loads before any code is executed. It differs from the function expression which is evaluated in normal top-down order. Function expressions loads only when the interpreter reaches that line of code. so if you use:-

var initialiseTable = function () {
    console.log("hello world!!");
};

it won't work but this works:-

function initialiseTable() {
    console.log("hello world!!");};

Why window.addEventListener does not work?

5 Answers5