Question:

What are events?

Answer:

Events are actions that ultimately result from user actions. For example, window.onload occurs because the user typed your URL in the browser address bar, or clicked a link to load a new page.

Question:

What are some specific events?

Answer:

Events include:

• window.onload
• window.onunload
• onclick
• onkeypress
• onmouseover
• onmouseout
• ...

A complete list and their descriptions may be found at:
w3schools JavaScript Event Reference

Question:

How do I manage events?

Answer:

Assign event handlers (functions) to the events of objects. For example:

    document.getElementById("MyButton").onclick = BtnClick;
    
    function BtnClick() {
        alert("You click MyButton!");
    }

Notice that when you assign the event handler, you do not use (), otherwise that would be a function call instead of assigning the handler to the event. In other words, the function would execute immediately, instead of waiting for the event to cause the function to execute.

    // do not use () when assigning an event handler to an object.
    // the below code will not perform properly.
    document.getElementById("MyButton").onclick = BtnClick();

Question:

What code should I write in an event handler?

Answer:

You may write whatever JavaScript that event requires. You could change text color, add 2 numbers, pop up a message box, ...
Some examples are shown in Form.html

Question:

What is "alert" in the previous code?

Answer:

alert() pops up a message box with an OK button. The visitor to your page cannot interact with your page until she clicks the OK button. This guarantees the message in your alert box is not overlooked.

Question:

What sort of messages can I put in an alert box?

Answer:

You can place any string inside the parentheses, including concatenating strings and variables. For example:

    var msg = "MyButton";
    document.getElementById("MyButton").onclick = BtnClick;
    function BtnClick() {
        alert("You click" + msg + "!");
    }

Question:

Besides alerting visitors to my page about something important, are there any other uses for an alert box?

Answer:

Alert boxes should be used sparingly, as they are mostly annoying. But an alert box can be a valuable debugging tool.

Question:

How can alert help me debug my JavaScript?

Answer:

Because JavaScript stops working when there is an error, you can strategically place an alert box in your code. If you get the pop-up, your code is working to that point. If you do not get your pop-up box, you know your JavaScript is broken before that place in your code.

Note: Once you fix your code, be sure to remove your debugging alert boxes!

Checkpoint

You should know 9.2

1. How to assign a handler to an event
2. How to pop-up an alert box

Questions 9.2

1. Should you use () when assigning a handler to an event?
2. Can you concatenate strings to place inside () in an alert statement?

Exercise 9.2

1. Inside scripts.js that you created for exercise 9.1:
   • Assign an onclick event handler named myPopUp to the html element with the ID: myButton
   • Define the myPopUp function - it takes no parameters
   • Inside the body of the myPopUp function, write code to pop up an alert box with the message: You clicked the button!

web developer toolbox 9.2

Update events_external.html

• Insert html inside the wxHtmlResults div:
  • <button id="myButton">Click me</button>

Open menu_js.html in your browser and click on your new link

Click on your new button to test your code