JQuery Event Object Properties Summary _jquery

Source: Internet
Author: User
Tags bind documentation

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.

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.