JQuery. Event is compatible with all browsers for detailed parsing of events

  • 2020-03-30 00:58:02
  • OfStack

JQuery. Event. Fix (event |, | window.event); This method converts the event object of the browser to jquery.event; If your event is bound through the jQuery method, there is no need to convert!

JQuery encapsulates the common properties of events in accordance with W3C specification, so that event processing can run normally in all browsers without browser type judgment.

1. The event. The type attribute
The function of this method is the type of time that can be obtained


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

When the above code runs, it returns: "click".

2. The event. The preventDefault () method
This method prevents the default event behavior. The W3C compliant preventDefault() method in JavaScript is not valid in Internet explorer. JQuery encapsulates it to make it compatible with various browsers.

3. The event. StopPropagation () method
The method is to stop the bubbling of events. The w3c-compliant stopPropagation() method in JavaScript is not valid in Internet explorer. JQuery encapsulates it to make it compatible with various browsers.

4. Event. The target attribute
The event.target attribute is used to get the element of the originating event. JQuery encapsulates it to avoid differences between W3C, IE, and safari standards.


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

5. The event. RelatedTarget properties
In the standard DOM, the elements that occur in the mouseover and mouseout are accessed through the event.target() method, and the associated elements are accessed through the event.relatedtarget attribute. The event.relatedtarget property in mouseover is equivalent to the event.fromelement property in Internet explorer, and in mouseout is equivalent to the event.toelement in Internet explorer. JQuery encapsulates it to make it compatible with various browsers.

6. Event. PageX/event pageY properties
The function of this method is to get the x and y coordinates of the cursor relative to the page. If jQuery is not used, then the event/event.y method is used in Internet explorer and the event.pagex/event.pagey method is used in Firefox. If there is a scroll bar on the page, add the width and height of the scroll bar. You should also subtract the default 2px border from Internet explorer.


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

7. The event. Which attribute
The function of this method is to get the left, middle and right mouse button in the mouse click event. Gets the keyboard button in the keyboard event.

$(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, middle and right to return 1, 2 and 3 respectively.

8. Event. MetaKey properties
On the keyboard for different browsers. Ctrl> JQuery also encapsulates the different key interpretations and stipulates that the event.metakey () method is obtained from keyboard events < Ctrl> Buttons.

9. Event. OriginalEvent properties.
The purpose of this method is to point to the original event object.


Related articles: