- Event Handling in JavaScript and jQuery
- Binding an Event Handler to an Event
- Binding Multiple Event Handlers
- Binding Event Handlers Using Shortcuts
- Calling Event Handlers Only Once
- Unbinding Event Handlers
- Using the Event Object
- Getting Mouse Coordinates
- Getting the Event Type
- Capturing Keystrokes
- Capturing Hover Events
- Getting Event Targets
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. |