By the end of this lesson you will know:
- what events are;
What are events?
Events are occurrences taking place in the context of the interactions between web server, web browser, and web user.
For instance, if you’re on a web page and click on a link, there are at least 3 important events being triggered:
- onClick event: triggered by you as you click the link;
- onUnload event: triggered by the web browser as it leaves the current web page;
- onLoad event: triggered by the browser as the new web page content is loaded.
- onSubmit (triggered by the user submitting a form);
- onFocus / onBlur (triggered by a user as, for example, she clicks in a textbox or clicks away from a textbox respectively);
- onMouseOver / onMouseOut (triggered by the user moving the mouse over or away from an HTML element respectively).
However, for the purposes of this tutorial, you’re mostly going to come across the core events listed above.
Hey, an onClick event going on!
In this tutorial you’ve already hooked an event handler to an event. More precisely, you attached the alert() command to the onLoad event.
“Hey, browser, display an alert box that contains the message typed within the () enclosing brackets”
The browser already has its own ways of handling events. For instance, when a page has loaded, the browser fires the onLoad event and displays the page contents; when a user clicks a link, the browser communicates to the server to access the requested page, etc. These are called default actions.
Prepare a new basic HTML document displaying a simple link like the one shown below:
<!DOCTYPE html> <html> <head> <title>Lesson 3: Events and Event Handlers</title> </head> <body> <h1>Lesson 3: Events and Event Handlers</h1> <a href="http://html.net">Click Me!</a> </body> </html>
Run the page in the browser. If you click on the link now, you’ll be landing straight to the HTML.net website. This is the browser default action, as explained above.
<!DOCTYPE html> <html> <head> <title>Lesson 3: Events and Event Handlers</title> </head> <body> <h1>Lesson 3: Events and Event Handlers</h1> <a href="http://html.net" onclick="alert('Going anywhere? Not so fast!'); return false;">Click Me!</a> </body> </html>
What’s just happened there?
Get ready for the major topic of lesson 4: variables and constants.