Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Using the Event Object

There's a great deal more power in jQuery event handling than what you've seen so far. For example, event handler functions are passed an event object, and that object has properties and methods that you can use.

For instance, if you want to know where a page element was clicked, you can use the pageX and pageY properties of the event object. If you want to know the target element of an event, you can use the event object's target property.

We'll take a look at the properties and methods of the jQuery event object in this topic and put them to work in the following topics.

Event Object Properties

Table 4.1 lists the properties of the jQuery event object.

Table 4.1. Event Object Properties

Property

Contains

event.altKey

Contains true if the Alt key was pressed.

event.ctrlKey

Contains true if the Ctrl key was pressed.

event.data

Contains the data passed to the jQuery bind( ) function.

event.keyCode

Contains the key code for the pressed key.

event.pageX

Contains the X mouse coordinates relative to the client area.

event.pageY

Contains the Y mouse coordinates relative to the client area.

event.relatedTarget

Contains the element that the mouse was previously on.

event.result

Contains the last value returned by an event handler.

event.screenX

Contains the X mouse coordinates relative to the screen.

event.screenY

Contains the Y mouse coordinates relative to the screen.

event.shiftKey

Contains true if the Shift key was pressed.

event.target

Contains the element that issued the event.

event.timeStamp

Contains the timestamp (in milliseconds) indicating when the event happened.

event.type

Contains the name of the event.

Event Object Methods

Table 4.2 lists the event object methods.

Table 4.2. Event Object Methods

Method

Does This

event.isDefaultPrevented( )

Returns true if event.preventDefault( ) was ever called on the event object.

event.isImmediatePropagationStopped( )

Returns true if event.stopImmediatePropagation( ) was ever called on this event object.

event.isPropagationStopped( )

Returns true if event.stopPropagation( ) was ever called on this event object.

event.preventDefault( )

Stops the browser from executing the default action for this event.

event.stopImmediatePropagation( )

Stops the remainder of the handlers from being executed.

  • + Share This
  • 🔖 Save To Your Account