JavaScript & jQuery: The Missing Manual, 3rd Edition

Chapter 5. Action/Reaction: Making Pages Come Alive with Events

When you hear people talk about JavaScript, you usually hear the word “interactive” somewhere in the conversation: “JavaScript lets you make interactive web pages.” What they’re really saying is that JavaScript lets your web pages react to something a visitor does: moving a mouse over a navigation button produces a menu of links; selecting a radio button reveals a new set of form options; clicking a small photo makes the page darken and a larger version of the photo pop onto the screen.

All the different visitor actions that a web page can respond to are called events. JavaScript is an event-driven language: Without events, your web pages wouldn’t be able to respond to visitors or do anything really interesting. It’s like your desktop computer. Once you start it up in the morning, it doesn’t do you much good until you start opening programs, clicking files, making menu selections, and moving your mouse around the screen.

What Are Events?

Web browsers are programmed to recognize basic actions like the page loading, someone moving a mouse, typing a key, or resizing the browser window. Each of the things that happens to a web page is an event. To make your web page interactive, you write programs that respond to events. In this way, you can make a <div> tag appear or disappear when a visitor clicks the mouse, a new image appear when she mouses over a link, or check the contents of a text field when she clicks a form’s Submit ...