HTML and CSS Reference
In-Depth Information
One nice feature of jQuery event handling is that the event object is passed to the event handler in a
standard way and contains the same set of properties across all browsers. The event object passed to an
event handler contains several pieces of information, as listed in Table 2-2.
Table 2-2.
Properties of Event Object Passed to an Event Handler
Property
Description
altKey
Returns true/false depending on whether the Alt key is pressed
ctrlKey
Returns true/false depending on whether the Ctrl key is pressed
data
User-specific data passed to the event handler. This is optional.
pageX
X coordinate of the mouse within the document.
pageY
Y coordinate of the mouse within the document.
shiftKey
Returns true/false depending on whether the Shift key is pressed.
target
A reference to the DOM element that triggered the event.
type
Type of event, such as
click
or
keydown
.
which
The key code of the keyboard key that was pressed.
The event object also provides a handy method
preventDefault()
that cancels the default action on
an event.
To understand how events can be handled using jQuery, let's develop an ASP.NET Web Forms
application as shown in Figure 2-3.
Figure 2-3.
Character counter using jQuery event handling
The web form shown in Figure 2-3 has a
<textarea>
to enter free-form text data. However, you can set
a maximum number of characters that can be entered. At runtime, as the user starts typing, a character
counter displays the number of characters that can still be entered. If the length of the entered text exceeds
a predefined value, you can either prohibit further entry or display a negative character count with colored
highlighting. When the user clicks the Submit button, they're asked to confirm whether they want to
submit the form; accordingly, either the form is submitted to the server or the action is cancelled.
Listing 2-2 shows the HTML markup of the web form.
