Detailed analysis of jQuery.event events compatible with various browsers_jquery

Before the introduction, let’s introduce a method of jQuery, jQuery.event.fix(event || window.event); This method converts the browser’s event object into jQuery.event; if your event is bound through the jQuery method , no need to convert!

JQuery encapsulates common attributes of events while following W3C specifications, so that event processing can run normally in all major browsers without the need for browser type judgment.

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

Copy code The code is as follows:

$("a").click(function(event){
alert(event.type); //Get the time type
return false ; //Prevent link jump
})

After the above code is run, it will return: "click".

2.event.preventDefault() method
The function of this method is to prevent the default event behavior. The preventDefault() method in JavaScript that complies with the W3C specification is invalid in IE browser. jQuery encapsulates it to make it compatible with various browsers.

3.event.stopPropagation() method
This method is to prevent the bubbling of events. The stopPropagation() method in JavaScript that complies with the W3C specification is invalid in IE browser. jQuery encapsulates it to make it compatible with various browsers.

4.event.target attribute
The function of the event.target attribute is to obtain the element that triggers the event. After jQuery encapsulates it, it avoids the differences between different standards of W3C, IE and safari browsers.

Copy code The code is as follows:

$("a[href=http://www .jb51.net]").click(function(event){
alert(event.target.href); //Get the href attribute value of the element that triggered the event
alert(event.target .tagName); //Get the tag name of the element that triggered the event
return false; //Prevent link jump})

5.event.relatedTarget attribute
In the standard DOM, the elements where mouseover and mouseout occur can be accessed through the event.target() method, and related elements are accessed through the event.relatedTarget attribute. The event.relatedTarget attribute in mouseover is equivalent to the event.fromElement attribute of IE browser, and in mouseout it is equivalent to event.toElement of IE browser. jQuery encapsulates it to make it compatible with various browsers.

6.event.pageX/event.pageY attribute
The function of this method is to obtain the x-coordinate and y-coordinate of the cursor relative to the page. If jQuery is not used, the event/event.y method is used in IE browser, and the event.pageX/event.pageY method is used in Firefox browser. If there are scroll bars on the page, add the width and height of the scroll bars. In IE browser, the default 2px border should also be subtracted.

Copy code The code is as follows:

$(function() {
$(" a").click(function(event) {
alert("Current mouse position:" event.pageX "," event.pageY);
//Get the current coordinates of the mouse relative to the page
return false; //Prevent link jump
});
})

7.event.which attribute
The function of this method is to use the mouse Get the left, middle, and right mouse buttons in the click event; get the keyboard buttons in the keyboard event.

Copy code 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 clicking the page with the mouse, click the left, middle, and right keys to return 1, 2, and 3 respectively.

8.event.metaKey property
According to different browsers’ different interpretations of the keys in the keyboard, jQuery has also encapsulated it and specified the event.metaKey() method as the keyboard Get the keystroke in the event.

9.event.originalEvent property.
The function of this method is to point to the original event object.