HTML and CSS Reference
In-Depth Information
Handling Events
13.1 Introduction to Event Handlers
JavaScript reacts to events. We have been talking about events since Chapter 1, “Intro-
duction to JavaScript,” because events are inherently part of almost all Web pages and
they make the pages interactive and dynamic. JavaScript events are asynchronous,
meaning that they can happen at any time. They are actions that are initiated by a user
visiting a Web page; for example, if the user submits a form or moves the mouse over a
link or an image, he or she might trigger an event. When an event occurs, your browser
has some default actions it takes; for example, if you click on a link, it opens up the loca-
tion in the href . JavaScript can also respond to a user's action and execute code in
response. The event itself may be blur, click, change, keystroke, and so on. We have seen
many examples using event handlers in previous examples. This chapter explains how
each of the event handlers responds when events occur on different objects.
JavaScript has three event models for programming events: the inline model, the
scripting model, and the DOM 2 model. In this chapter we discuss the inline model and
the scripting model. In Chapter 15, “The W3C DOM and JavaScript,” we describe the
way events are handled by the W3C DOM Level 2 model and its pros and cons.
13.2 The Inline Model for Handling Events
This is the oldest and easiest way to handle events. With the inline model, the event han-
dlers are attributes of an HTML tag and are used to handle the event for which they are
named. For example the onClick handler will handle the click event, the onSubmit handler
will handle the submit event, and so on. Although a very popular way of dealing with
events, the disadvantage of using the inline model is that JavaScript is intrusive; that is, it
is not separated from the HTML markup. The inline model will be used here to show you
what the many event handlers do, and how they affect the objects in a document. Later in
this chapter, we discuss the JavaScript scripting method for handling events.
Search WWH ::

Custom Search