Chapter 9th 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 The Event object event object is an event object that is accepted by handling the default pass of the function. The event object has a lot of properties and methods that are available, and we've learned more about these commonly used properties and methods in the JavaScript course, and here we show them 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 () {//Pass Data alert (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:100},function (e) {alert (e.data.user);});
Note: Keys for key-value pairs can be quoted or not, and arrays can be used when called: Alert (e.data[' user ');

Gets the DOM element before it is moved into the DIV
$ (' div '). MouseOver (function (e) {alert (e.relatedtarget);});
Gets the nearest DOM element that is reached after the div is moved out
$ (' div '). Mouseout (function (e) {alert (e.relatedtarget);});

Gets the bound DOM element, which is equivalent to this, which differs from
Event.target $ (' div '). 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
<divstyle= "width:200px;height:200px;background:red;" >
<inputtype= "button" value= "buttons"/>
</div>
Three different element triggering events
$ (' input '). Click (function () {
Alert (' button is triggered! ‘);
});
$ (' div '). Click (function () {
Alert (' div layer ' is triggered! ‘);
});
$ (document). Click (function () {
Alert (' 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 way for an event object: Event.stoppropagation (); When this method is set to the event that needs to be triggered, the bubbling behavior of all the upper layers is canceled. $ (' 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.
Clicking the hyperlink jumps to the specified page
$ (' 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 these two methods need to be enabled at the same time, there is a shorthand scheme instead, which is to return false directly.
$ (' a '). Click (function (e) {
Returnfalse;
});

Some ways to bubble and default behavior
Method Name Description
Preventdefault () cancels the default behavior of an element
Isdefaultprevented () determines whether the Preventdefault () method is called
Stoppropagation () Cancel event bubbling
Ispropagationstopped () determines whether the Stoppropagation () method is called
Stopimmediatepropagation () cancels event bubbling and cancels subsequent event handlers for the event
Isimmediatepropagationstopped () determines whether the Stopimmediatepropagation () method is called

Determines whether the default behavior of the element is canceled
$ (' input '). KeyUp (function (e) {
E.preventdefault ();
Alert (e.isdefaultprevented ());
});

Popup is True

Determines whether the default behavior of the element is canceled
$ (' input '). KeyUp (function (e) {
Alert (e.isdefaultprevented ());
});

Eject is False

Cancel bubbling and cancel subsequent event handler functions
$ (' input '). Click (function (e) {
Alert (' input ');
E.stopimmediatepropagation ();
});
$ (' input '). Click (function () {
Alert (' Input2 ');
});
Eject input does not eject Input2

Determine if the Stopimmediatepropagation () method is executed
$ (' input '). Click (function (e) {
E.stopimmediatepropagation ();
Alert (e.isimmediatepropagationstopped ());
});
Popup is True

Chapter 9th Event Object