1

In the following, I am assigning the click event to func(). When I load the page, the alert box shows up. Can someone explain why the event is being triggered? What exactly is happening behind the scenes? Do all events attached to a function get triggered when the DOM loads? 

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
        window.onload = function initialize() {
            func.click += handler();
        }

        function handler(e) {
            alert('clicked');
        }

        function func() {

        }
    </script>
</head>

<body>
</body>

</html>
user2383728
  • 688
  • 1
  • 5
  • 13
  • Because you're *calling* `handler` by coding `handler()`. The function *reference* is just `handler` without the parens that indicate a call, e.g., http://stackoverflow.com/a/8227270/438992, http://stackoverflow.com/questions/7969088/when-do-i-use-parenthesis-and-when-do-i-not/7969111#7969111 – Dave Newton Jan 28 '16 at 21:54
  • 2
    [JavaScript Basics - MDN Learn](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics) – adeneo Jan 28 '16 at 21:54
  • 1
    "I am assigning the click event to func(). " really? review the code – Mark Schultheiss Jan 28 '16 at 21:56
  • 1
    Well now it's just silly because what's `func`?! – Dave Newton Jan 28 '16 at 21:59
  • @Mark. Am I not assigning a click event on function func() ? – user2383728 Jan 28 '16 at 22:01
  • @user2383728: No, you are not. You don't assign events to functions, that makes no sense. You assign events to DOM elements. These events trigger functions when you click on an element on the page. Think about it... how can you *click* on a function? :-) – Rocket Hazmat Jan 28 '16 at 22:04
  • What he said. Understanding these things are key to understanding of objects, properties and event handlers in JavaScript. You are on your way to that AH HA moment! – Mark Schultheiss Jan 28 '16 at 22:07
  • 1
    I would make the suggestion to begin using addEventListener as you see here https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener Its really clear what the intent is then – Mark Schultheiss Jan 28 '16 at 22:19
  • 1
    I understand that you attach events to dom elements, not functions. I was just curious to see if I had could get the same behavior for functions. Maybe, by dispatching a custom event. Silly me. Ya addEventListener is more clear as it would have given me a run time error (func.addEventListener() doesn't exist. Thanks a lot for your explanations! – user2383728 Jan 28 '16 at 22:36

1 Answers1

0

In JavaScript, functions are first-order citizens. Meaning, they act like variables.

handler is the "variable" holding your function. handler() calls the function and returns a value - undefined in this case.

func.click is not an event, it's just a property. You can attach properties to basically any variable/object in JavaScript. It has no special meaning. Also, func.click doesn't exist, so doing += will probably give you an error since it's undefined.

Rocket Hazmat
  • 204,503
  • 39
  • 283
  • 323