Event objects are indispensable for using events. Because the acquisition of event objects and the properties of event objects vary across browsers, it is difficult for us to use event objects across browsers.
Jquery unifies the event object. When an event handler is bound, the event object formatted by jquery is passed as a unique parameter:
$ ("# Testdiv"). BIND ("Click",Function(Event){});
For more information about event objects, see jquery official documentation: http://docs.jquery.com/Events/jQuery.Event
The jquery event object merges the differences between different browsers. For example, you can use the event.tar get attribute in all browsers to obtain the event trigger (use the native event object in IE, you need to access event. srcelement ).
The following shows the attributes supported by jquery event objects in the expanded Browser:
Attribute name |
DescriptionExample |
Type |
Event Type. If you use an event handler to process multiple events, you can use this attribute to obtain the event type, such as click.$ ("A"). Click (function (event) {alert (event. Type );}); |
Target |
Get the event trigger DOM object$ ("A [href = http://google.com]"). Click (function (event) {alert(event.tar get. href );}); |
Data |
Additional parameters are input when an event is called.$ (""). Each (function (I) {$ (this ). BIND ('click', {index: I}, function (e) {alert ('My index is '+ E. data. index );});}); |
Relatedtarget |
For mouse events, it indicates the DOM elements that exit or enter when an event is triggered.$ ("A"). mouseout (function (event) {alert (event. relatedtarget );}); |
Currenttarget |
The DOM object of the currently triggered event before the bubble is equivalent to this.$ ("P"). Click (function (event) {alert (event. currenttarget. nodename );}); Result: P |
Pagex/y |
In a mouse event, the horizontal/vertical coordinates of the event relative to the page origin.$ ("A"). Click (function (event) {alert ("current mouse position:" + event. pagex + "," + event. Pagey );}); |
Result |
Value returned by the previous event processing function$ ("P "). click (function (event) {return "hey"}); $ ("p "). click (function (event) {alert (event. result );}); Result: "Hey" |
Timestamp |
The timestamp of the event.VaR last; $ ("p "). click (function (event) {If (last) Alert ("time since last event" + event. timestamp-last); last = event. timestamp ;}); |
The above is the attribute of the event object provided in jquery official documentation. in the book "jquery practice", the following attributes supported by multiple browsers are also provided. I have not tried every attribute in the time relationship. You can help verify whether they are available in all browsers:
Attribute name |
Description |
Altkey |
Whether the Alt key is pressed or not. True is returned when the Alt key is pressed. |
Ctrlkey |
Whether or not the ctrl key is pressed. If you press it, return true. |
Metakey |
Whether the meta key is pressed or not. If you press the key, true is returned. The meta key is the ctrl key of the PC machine or the command key on the Mac machine. |
Shiftkey |
Whether the Shift key is pressed. If you press the key, return true. |
Keycode |
For keyup and keydown events, keys are returned. case-insensitive. Both a and a return 65. For keypress events, use the which attribute because the which attribute remains reliable during cross-browsing. |
Which |
For Keyboard Events, return the numeric encoding of the trigger event key. For mouse events, return the mouse key number (1 left, 2 middle, 3 right ). |
Screenx/y |
For mouse events, obtain the horizontal/vertical coordinates of the events relative to the screen Origin |
In addition to attributes, event objects also have events. Some events will be used, such as canceling bubble stoppropagation (). The following is a list of functions of jquery event objects:
Name |
DescriptionExample |
Preventdefault () |
Cancel events that may cause any semantic operations, such as <A> element href link loading, form submission, and click.$ ("A"). Click (function (event) {event. preventdefault (); // do something }); |
Isdefaultprevented () |
Called? Preventdefault () Method $ (""). Click (function (event) {alert (event. isdefaultprevented (); event. preventdefault (); alert (event. isdefaultprevented ());}); |
Stoppropagation () |
Cancel event bubble$ ("P"). Click (function (event) {event. stoppropagation (); // do something }); |
Ispropagationstopped () |
Called? Stoppropagation () Method $ ("P "). click (function (event) {alert (event. ispropagationstopped (); event. stoppropagation (); alert (event. ispropagationstopped ());}); |
Stopimmediatepropagation () |
Cancel executing other event processing functions and cancel event bubbling. if the same event is bound to multiple event handlers, no other event handlers will be called after this method is called in one of the event handlers.$ ("P "). click (function (event) {event. stopimmediatepropagation () ;}); $ ("p "). click (function (event) {// This function won't be executed }); |
Isimmediatepropagationstopped () |
Called? Stopimmediatepropagation () Method $ ("P "). click (function (event) {alert (event. isimmediatepropagationstopped (); event. stopimmediatepropagation (); alert (event. isimmediatepropagationstopped ());}); |
In these functions, stoppropagation () is the longest and certainly used function. It is equivalent to the event. cancelbubble = true operation of the original event object to cancel the bubble.