JQuery Event Object

JavaScript passes the event object, that is, the event object, by default in a handler function. However, because of browser compatibility, developers will always do the compatibility aspect of processing. JQuery solves these problems in encapsulation, and also creates some very useful properties and methods.

A Event Object

The event object is the events object, which is accepted by handling the default pass of the function. The event object has a lot of properties and methods available for the previous processing of the function's E, which we have already learned in detail in the JavaScript course, and here we show it again.

// passing event objects   by processing functions $ ('input'). Bind ('click', function (e) {          Accept Event Object Parameters        alert (e);   });

//get the trigger event name from the Event.type property$('input'). Click (function (e) {alert (e.type);  }); //gets the bound DOM element through Event.target$('input'). Click (function (e) {alert (e.target);  }); //get extra data through Event.data, which can be numbers, strings, arrays, objects$('input'). Bind ('Click',123, function () {//Passing Dataalert (e.data);//Get Digital data});

Note: If the string is passed: ' 123 ', if the array is passed: [123, ' abc '], if the object is passed: {User: ' Lee ', age:100}. The array is called by: e.data[1], and the object is called by: E.data.user.

// Event.data For additional data and can also be used   for encapsulated shorthand events $ ('input'). Click ({User:'Lee', Age: },function (e) {       alert (e.data.user);   });  

Note: Keys for key-value pairs can be enclosed in quotation marks, or they can be used in the form of an array at the time of invocation:   alert (e.data[' user ');

 //  Gets the DOM element that was moved into the div before  $ ( '     '. Click (function (e) {alert (e.currenttarget); }); 

Note: Event.target gets the dom,event.currenttarget of the triggering element is the DOM of the listener element. And this is the DOM that gets the listener element.

//gets the return value of the last event$('Div'). Click (function (e) {return'123'; });$('Div'). Click (function (e) {alert (e.result);  }); //gets the current timestamp$('Div'). Click (function (e) {alert (e.timestamp);  }); //get the left and right mouse button$('Div'). MouseDown (function (e) {alert (E.which);  }); //get keys for the keyboard$('input'). KeyUp (function (e) {alert (E.which);  }); //gets whether the CTRL key is pressed and the META key does not exist, resulting in the inability to use$('input'). Click (function (e) {alert (E.ctrlkey);  }); //gets the current position of the mouse that triggered the element$ (document). Click (function (e) {alert (E.screeny+','+e.pagey+','+e.clienty);  }); 

Two Bubbling and default behavior

If multiple elements overlap in the page, and the overlapping elements are bound to the same event, a bubbling problem occurs

//HTML Page<div style="width:200px;height:200px;background:red;"> <input type="Button"Value="Button"/> </div>//three different element triggering events$('input'). Click (function () {alert ('the button is triggered! ');  }); $('Div'). Click (function () {alert ('The div layer is triggered! ');  }); $ (document). Click (function () {alert ('The document page is triggered! ');  }); 

Note: When we click on the document, only the document event is triggered, and when we click on the div layer, we trigger the DIV and document two, and when we click the button, the button, Div, and document are triggered. The order of triggering is from small to large range. This is the so-called bubbling phenomenon, one layer at a level upward.

JQuery provides a method for an event object that ：event.stopPropagation() , when set to an event that needs to be triggered, will be canceled for all layers of bubbling behavior.

$ ('input'). Click (function (e) {       alert (' button is triggered!)  ');       E.stoppropagation ();   });

The elements in the Web page will have their own default behavior at the time of operation. For example: Right-click the text box input area, the system menu will pop up, click the hyperlink will jump to the specified page, click the Submit button will submit the data.

$ ('a'). Click (function (e) {       e.preventdefault ();   });   // prevent submission of form jumps    $ ('form'). Submit (function (e) {   e.preventdefault ();   });

Note: If you want the above hyperlink to block the default behavior at the same time and suppress the bubbling behavior, you can write the two methods simultaneously: event.stopPropagation() and event.preventDefault() . If the two methods need to be enabled at the same time, there is a shorthand scheme instead, which is directlyreturn false

$ ('a'). Click (function (e) {       returnfalse;   });

JQuery Event Object