Different usage of parentheses between html inline events handler and unobtrusive event handler

Question

When I want to execute a script myFunction(){} when a page is loaded I have two choices.

1 <body onload="myFunction()">
2 <script> window.onload = myFunction </script>

My question is why we need parentheses in the first case but not in the second case? What is the theory behind it?

In one you're calling it (with the parens), in the other you're setting a reference to it (without the parens), e.g., http://stackoverflow.com/a/7969111/438992 — Dave Newton, Apr 07 '16 at 16:41
The browser is firing whatever function you are assigning to the `onload` property for you. (Hooking) — Antiga, Apr 07 '16 at 16:41
@HaNdTriX ... That has parens. Did you mean quotes? IMO you should use the quotes for clarity anyway. — Dave Newton, Apr 07 '16 at 16:47

score 0 · Answer 1 · answered Apr 07 '16 at 16:42

0

The attribute version dates back to the early days of Javascript and is not advanced enough to support the notion of referencing a function rather than stating a script fragment to evaluate. Its usage is frowned on nowadays by those who advocate modern Javascript techniques.

answered Apr 07 '16 at 16:42

Paul Kienitz

890
6
24

Since this is a multiple SO dupe let's find and point to those instead of posting identical answers. – Dave Newton Apr 07 '16 at 16:46

boisvert · Answer 2 · 2016-04-07T16:47:04.330

0

<body onload="myFunction()">

is a function call: when the page is loaded, the function is called.

<script> window.onload = myFunction </script>

is a reference to the function object. It is a better solution, if only because inline javascript is irritating to read, with its mix of HTML and javascript, while scripts can be separately written and managed.

edited Apr 07 '16 at 16:47

answered Apr 07 '16 at 16:44

boisvert

3,609
2
26
51

Since this is a multiple SO dupe let's find and point to those instead of posting identical answers. – Dave Newton Apr 07 '16 at 16:46

Different usage of parentheses between html inline events handler and unobtrusive event handler

2 Answers2