jQuery in Action
Events are where it happens!
83
Anyone familiar with the Broadway show Cabaret, or its subsequent Hollywood film,
probably remembers the song "Money Makes the World Go Around." Although this
cynical view might be applicable to the physical world, in the virtual realm of the
World Wide Web, it's events that make it all happen!
probably remembers the song "Money Makes the World Go Around." Although this
cynical view might be applicable to the physical world, in the virtual realm of the
World Wide Web, it's events that make it all happen!
Like many other
GUI
management systems, the interfaces presented by
HTML
web pages are asynchronous and event-driven (even if the
HTTP
protocol used to
deliver them to the browser is wholly synchronous in nature). Whether a
GUI
is
implemented as a desktop program using Java Swing,
X11
, the .
NET
framework,
or a page in a web application using
HTML
and JavaScript, the procedure is
pretty much the same:
1
Set up the user interface.
2
Wait for something interesting to happen.
3
React accordingly.
4
Repeat.
The first step sets up the display of the user interface; the others define its behavior.
In web pages, the browser handles the setup of the display in response to the
markup (
In web pages, the browser handles the setup of the display in response to the
markup (
HTML
and
CSS
) that we send to it. The script we include in the page
defines the behavior of the interface.
This script takes the form of event handlers, also known as listeners, that react to
the various events that occur while the page is displayed. These events could be
generated by the system (such as timers or the completion of asynchronous
requests) but are most often the result of some user action (such as moving or
clicking the mouse or entering text via the keyboard). Without the ability to react
to these events, the World Wide Web's greatest use might be limited to showing
pictures of kittens.
generated by the system (such as timers or the completion of asynchronous
requests) but are most often the result of some user action (such as moving or
clicking the mouse or entering text via the keyboard). Without the ability to react
to these events, the World Wide Web's greatest use might be limited to showing
pictures of kittens.
Although
HTML
itself does define a small set of built-in semantic actions that
require no script on our part (such as reloading pages as the result of clicking an
anchor tag or submitting a form via a submit button), any other behaviors that we
wish our pages to exhibit require us to handle the various events that occur as our
users interact with those pages.
anchor tag or submitting a form via a submit button), any other behaviors that we
wish our pages to exhibit require us to handle the various events that occur as our
users interact with those pages.
In this chapter, we examine the various ways that the browsers expose these
events, how they allow us to establish handlers to control what happens when
these events occur, and the challenges that we face due to the multitude of differ-
ences between the browser event models. We then see how jQuery cuts through
the browser-induced fog to relieve us of these burdens.
these events occur, and the challenges that we face due to the multitude of differ-
ences between the browser event models. We then see how jQuery cuts through
the browser-induced fog to relieve us of these burdens.
Let's start off by examining how browsers implement their events models.