Jquery event object attribute Summary

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.