JavaScript/Handling Events

So far, the shown JS programs start automatically when the HTML page is loaded. This kept everything small, simple, and straightforward.

Now we want to introduce the mechanism of starting a program intentionally at specific points in time. When a user types in some content, it may be necessary to evaluate it; when a user clicks a button, it may be necessary to start a complex action like a database query. The actions (validation, DB query) will be handled in a JS function, and some HTML code will initiate the call to such JS functions. To understand how it works, we must learn about events. In a later chapter, we will explain events in detail.

Assume a user clicks on a button. This generates an onclick event. The occurrence of such an event is declaratively combined with a call to a named JS function. The browser calls this JS function. The JS function runs.

The complete HTML with its embedded JS reads:

<!DOCTYPE html>
<html>
<head>
  <title>Testing an event</title>
  <script>
  function showSomething() {
    alert("Someone clicked the button.");
  }
  </script>
</head>
<body>
  <h1>Click the button</h1>
  <button type="button" onclick="showSomething()">A button</button>
</body>
</html>

In contrast to the previous examples, nothing happens when the page is loaded. This results from the fact that the alert() command is embedded in the JS function showSomething(). This function is only defined but not started.
The HTML element <button> has an attribute onclick with a value showSomething().
When the button is clicked, an onclick event occurs. The event is bound to the button.
The browser handles the event. He notices that a function with the given name shall run.
The browser searches for the function in all available JS scripts (please notice that this name as well as all JS code is case-sensitive!).
After finding the function with exactly this name in the <script>...</script> part, the browser starts the function.
The function executes and shows the message.

In essence, the JS function with its message-showing behavior will run whenever the user clicks on the button.

Second Example

This example offers the possibility to change the background color of some HTML elements. It uses 3 buttons, 2 JS functions, and 1 event type (onclick; there are many other types). Furthermore, it introduces the concept of an element id.

<!DOCTYPE html>
<html>
<head>
  <title>Second test for events</title>
  <script>
  function makeGreen() {
    document.getElementById("mainPart")
            .style.background = "green";
  }
  function makeBlue() {
    document.getElementById("mainPart")
            .style.background = "blue";
    document.getElementById("blueButton")
            .style.background = "aqua";
  }
  </script>
</head>
<body id="mainPart">
  <h1>Click the buttons</h1>
  <button type="button" onclick="makeGreen()">GREEN</button>
  <button type="button" onclick="makeBlue()"
          id="blueButton">BLUE</button>
  <button type="button">Nothing</button>
</body>
</html>

What are the differences to the first example?

There are 3 buttons. The first two are associated with a JS function; the third is not.
The <body> and the second <button> elements contain an attribute id="...". This assigns an identifier to them. He can be used in JS to locate them.
The <script> element contains two functions with different names.
When you click on one of the buttons, the associated JS function is called. Because the third button has no associated JS function, nothing happens there.
In JS, the code part document.getElementById("...") locates the element with this ID. The code part .style.background = "..." modifies the background color of this element. Please ignore that the two parts are written in separate lines. This is only for better reading of the source code on small devices. You can link the two lines together.
The makeBlue() function executes two statements and changes the background color of the body and of itself.