HTML and CSS Reference
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
Returns true/false depending on whether the Alt key is pressed
Returns true/false depending on whether the Ctrl key is pressed
User-specific data passed to the event handler. This is optional.
X coordinate of the mouse within the document.
Y coordinate of the mouse within the document.
Returns true/false depending on whether the Shift key is pressed.
A reference to the DOM element that triggered the event.
Type of event, such as click or keydown .
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
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.