Event objects are naturally unavoidable with events. Because of the differences in the acquisition of event objects between different browsers and the properties of event objects, it is difficult to use event objects across browsers.
The event object is unified in jquery, and when the event handler is bound, the jquery-formatted event object is passed in as a unique parameter:
$ ("#testDiv"). Bind (function (event) {});
For a detailed description of the Event object, you can refer to the jquery official documentation: Http://docs.jquery.com/Events/jQuery.Event
The jquery event object merges the differences in different browsers, such as the Event.target property in all browsers to get the trigger of the event (using the native event object in IE, access to event.srcelement).
The following are the properties that the jquery event object can support in expanding browsers:
Property name |
Description examples |
Type |
Event type. If you use an event handler to handle multiple events, you can use this property to get the event type, such as Click.$ ("a"). Click (Function (event) {
alert (event.type);
}); |
Target |
Get Event Trigger DOM object$ ("a[href=http://google.com]"). Click (Function (event) {
alert (event.target.href);
}); |
Data |
An additional parameter is passed in when the event is called.$ ("a"). each (the function (i) {
$ (this). bind (' click ', {index:i}, function (e) {
alert (' Me index is ' + E.data.index); c4/>});
|
Relatedtarget |
For mouse events, mark the DOM element that was left or entered when the event was triggered$ ("a"). Mouseout (function (event) {
alert (event.relatedtarget);
}); |
Currenttarget |
The DOM object of the current triggering event before bubbling, equivalent to this.$ ("P"). Click (Function (event) {
alert (event.currentTarget.nodeName);
}); Result: P |
pagex/y |
In mouse events, the horizontal/vertical coordinates of the event relative to the origin of the page.$ ("a"). Click (Function (event) {
alert ("Current mouse position: + Event.pagex +," + Event.pagey);
}); |
Result |
The value returned by the previous event handler function$ ("P"). Click (Function (event) {return
"Hey"
});
$ ("P"). Click (Function (event) {
alert (event.result);
}); Result: "Hey" |
TimeStamp |
The time stamp at which the event occurred.var last;
$ ("P"). Click (Function (event) {
if (last)
alert (' time since last event ' + event.timestamp-last);
last = Event.timestamp;
}); |
This is the property of the event object provided in the official jquery documentation. In the "jquery Combat" book also provides the following browser-supported properties, time relationship I didn't try every attribute, you can help verify that you are available in all browsers:
Property name |
Describe |
Altkey |
Whether the ALT key is pressed. Press RETURN True |
Ctrlkey |
CTRL key is pressed, press return True |
Metakey |
Returns true if the META key is pressed. The META key is the CTRL key for the PC machine, or the command key on the Mac machine. |
Shiftkey |
If the SHIFT key is pressed, press return True |
KeyCode |
Returns the pressed key for the KeyUp and KeyDown events. Case-insensitive, A and a both return 65. Use the which property for the KeyPress event, because the which property is still reliable across browsing. |
which |
For keyboard events, returns the numeric encoding of the key that triggered the event. For mouse events, return the mouse button number (1 left, 2, 3 right). |
screenx/y |
For mouse events, gets the horizontal/vertical coordinates of the event relative to the screen origin |
Event objects also have events in addition to owning attributes. There are some things that are certain to be used, such as canceling bubbling Stoppropagation (), and so on. The following is a list of functions for the jquery event object:
Name |
Description examples |
Preventdefault () |
Cancels events that may cause any semantic action. For example, the <a> element's href link loading, the form submission, and click to cause the check box to toggle state.$ ("a"). Click (Function (event) {
event.preventdefault ();
Do something
}); |
Isdefaultprevented () |
Have you invoked Preventdefault () Method $ ("a"). Click (Function (event) {
alert (event.isdefaultprevented ());
Event.preventdefault ();
Alert (event.isdefaultprevented ());
}); |
Stoppropagation () |
Cancel Event Bubbling$ ("P"). Click (Function (event) {
event.stoppropagation ();
Do something
}); |
Ispropagationstopped () |
Have you invoked Stoppropagation () Method $ ("P"). Click (Function (event) {
alert (event.ispropagationstopped ());
Event.stoppropagation ();
Alert (event.ispropagationstopped ());
}); |
Stopimmediatepropagation () |
Cancels the execution of other event handlers and suppresses event bubbling. If the same event is bound to multiple event handlers, calling this method in one of the event-handler functions will not continue to invoke the other event-handler function.$ ("P"). Click (Function (event) {
event.stopimmediatepropagation ();
});
$ ("P"). Click (Function (event) {
//This function won ' t is executed
}); |
Isimmediatepropagationstopped () |
Have you invoked Stopimmediatepropagation () Method $ ("P"). Click (Function (event) {
alert (event.isimmediatepropagationstopped ());
Event.stopimmediatepropagation ();
Alert (event.isimmediatepropagationstopped ());
}); |
The Stoppropagation () in these functions are the most important functions that we use and are definitely used. The equivalent of manipulating the original event object's Event.cancelbubble=true to cancel bubbling.