Chapter 12. Events

In a world without JavaScript, all you would have on a web page would be static, unchanging layout and content. Browser scripting adds a dimension of dynamism, allowing you to respond to user input and periodically change the state of the page. Events are the ties that bind the static world of HTML and CSS to the machinery of JavaScript. Every time something occurs on the page, such as the clicking of a button, the scrolling of the window, or the movement of the mouse, a JavaScript event has probably fired as well. Some events fire even without the help of the user. For example, a "load" event fires when the window has finished loading, and an "error" event fires on an image when its source can't be downloaded.

In event-driven programming languages like JavaScript, there are often two stages to program execution. The first of these is the event definition stage, which is where you set up your environment, execute some initial code, define your initial view, and bind to any subsequent program events that may trigger further code execution. On a web page this corresponds to the initial parsing of the document by the browser. During this time, any JavaScript found inline in the page is executed as soon as it's discovered (for the most part). This often includes some external JavaScript files that need to be downloaded. These are also parsed in the order that they appear. Typically, very little actual code is executed at this stage, however. Usually, what you do is ...

Get JavaScript® Programmer's Reference now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.