JQuery. event is compatible with the event details of various browsers.

Source: Internet
Author: User
JQuery encapsulates common attributes of events in compliance with W3C specifications, this allows event processing to run properly in various Browsers without the need to determine the browser type. Before introducing jQuery, we will first introduce jQuery. event. fix (event | window. event); this method converts the event object of the browser to jQuery. event; if your event is bound using the jQuery method, you do not need to convert it!

JQuery encapsulates common attributes of events in compliance with W3C standards, so that event processing can run properly in all major browsers without browser type judgment.

1. event. type attribute
This method is used to obtain the time type.

The Code is as follows:


$ ("A"). click (function (event ){
Alert (event. type); // obtain the time type
Return false; // block link jump
})


After the preceding code is run, "click" is returned ".

2. event. preventDefault () method
This method is used to prevent default event behavior. The W3C-compliant preventDefault () method in JavaScript is invalid in IE browser. JQuery encapsulates it to make it compatible with various browsers.

3. event. stopPropagation () method
This method prevents event bubbles. The stopPropagation () method conforming to W3C standards in JavaScript is invalid in IE browser. JQuery encapsulates it to make it compatible with various browsers.

4.event.tar get attribute
The event.tar get attribute is used to obtain the elements of the departure event. JQuery's encapsulation avoids the differences between W3C, IE, and safari standards.

The Code is as follows:


$ ("A [href = http://www.jb51.net]"). click (function (event ){
Alert(event.tar get. href); // gets the href attribute value of the element that triggers the event.
Alert(event.tar get. tagName); // gets the Tag Name of the element that triggers the event.
Return false; // block link jump })


5. event. relatedTarget attributes
In standard dom, elements generated by mouseoverand mouseoutcan be accessed through the event.tar get () method, and relevant elements are accessed through the event. relatedTarget attribute. The event. relatedTarget attribute is equivalent to the event. fromElement attribute of IE browser in mouseover, and is equivalent to the event. toElement of IE browser in mouseout. jQuery encapsulates the attribute to make it compatible with various browsers.

6. event. pageX/event. pageY attributes
This method is used to obtain the x and y coordinates of the cursor relative to the page. If jQuery is not used, the event/event. y method is used in IE, and the event. pageX/event. pageY method is used in Firefox. If a scroll bar exists on the page, the width and height of the scroll bar are also added. In ie, the default 2px border should also be subtracted.

The Code is as follows:


$ (Function (){
$ ("A"). click (function (event ){
Alert ("Current mouse position:" + event. pageX + "," + event. pageY );
// Obtain the coordinates of the mouse relative to the page
Return false; // block link jump
});
})


7. event. which attributes
The function of this method is to get the left, center, and right mouse buttons from the mouse click event; to get the keyboard buttons from the keyboard event.

The Code is as follows:


$ (Function (){
$ ("Body"). mousedown (function (e ){
Alert (e. which); // 1 = left mouse button; 2 = middle mouse button; 3 = right mouse button.
})
})


The above code is loaded into the page. When you click the page with the mouse, click left, center, right-click to return 1, 2, 3, respectively.

8. event. metaKey attributes
For different browsers Different key-press interpretations, jQuery is also encapsulated and requires that the event. metaKey () method is obtained from a keyboard event Press the key.

9. event. originalEvent attribute.
This method is used to point to the original event object.

Related Article

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.