Event object in jquery

Time:2021-6-4

For native event objects, developers always need to deal with compatibility due to browser differences; To solve this problem, jQuery encapsulates its own event objects, solves the compatibility problem of native event objects, and provides many new properties and methods.

Content outline:

1. Event object

2. Bubbling and default behavior

JavaScript passes the event object in the event handler by default, that is, the event object. However, due to the compatibility of browsers, developers always deal with compatibility. JQuery solves these problems when encapsulating, and also creates some very useful properties and methods.

1、 Event object

An event object is an event object, which is passed and accepted by default through a processing function. The e of the previous processing function is the event object. The event object has many available properties and methods. Please refer to JavaScript basics for details.

Event object in jquery

The mobile touch event is encapsulated in the originalevent attribute in jQuery and calls methods, such as e.originalevent.touches [0]. Clientx;

Reason: there are many kinds of JS events

Mouse event: mouseevent

Touch event: touch event

Focus event: focus event

Keyboard event: keyboardevent

And so on, there are a lot of event types. In jQuery, different event types are pointed to the new attribute originalevent, namely originalevent vent:touchEvent Therefore, to access the properties in touchevent, you need to add an originalevent in front of it, such as e.originalevent.touches [0]. Clientx

Several of them are explained

//Get the trigger event name through the event. Type property

$(‘input’).click(function (e) {

alert(e.type);

});

//Get additional data through event. Data, which can be numbers, strings, arrays, objects

$(‘input’).bind(‘click’, 123, function () {     / / pass data

alert(e.data);                             / / get digital data 123

});

Note: Pass’ 123 ‘for string,: [123,’ ABC ‘for array, and {user:’ Lee ‘, age: 100} for object. The calling method of array is e.data [1], and the calling method of object is e.data.user.

//event.data To get additional data, you can also use the

$(‘input’).click({user : ‘Lee’, age : 100},function (e) {

alert(e.data.user);

});

PS: the key of key value pair can be quoted or not; Array can also be used when calling: Alert (e.data [‘user ‘]);

Difference: target,currentTarget,relatedTarget:

//Get the DOM element that triggers the event through event. Target

$(‘input’).click(function (e) {  

alert(e.target);

});

//Relatedtarget gets adjacent elements

//Get the DOM element before moving to Div

$(‘div’).mouseover(function (e) {

alert(e.relatedTarget);

});

//Get the closest DOM element after moving out the Div

$(‘div’).mouseout(function (e) {

alert(e.relatedTarget);

});

//Get the DOM element of the binding, which is equivalent to this, different from event. Target

$(‘div’).click(function (e) {

alert(e.currentTarget);

});

PS: event.target gets the dom of the triggering element (such as the click event, that is, the specific click element), and event.currenttarget gets the dom of the listening element (that is, the binding element). Equivalent to this, this is also the DOM to get the listening element.

//Result gets the return value of the last same event

$(‘div’).click(function (e) {

return ‘123’;

});

$(‘div’).click(function (e) {

alert(e.result);

});

//Which gets the left, middle and right mouse button

$(‘div’).mousedown(function (e) {

alert(e.which);

});

//Which gets the key of the keyboard

$(‘input’).keyup(function (e) {

alert(e.which);

});

//Gets the current mouse position of the trigger element

$(document).click(function (e) {

alert(e.screenY+ ‘,’ + e.pageY + ‘,’ + e.clientY);

});

PS: pagex and pagey get the position from the origin of the page; Screen X and screen y get the distance from the display screen; Clientx and clienty get the distance from the page’s view. When there is no scroll bar, pagey and clienty are the same in value. When there is a scroll bar, pagey becomes significantly larger because it is relative to the origin of the page.

2、 Bubbling and default behavior

Prevent bubbling:

If multiple elements are overlapped in the page, and the overlapped elements are bound to the same event, the bubbling problem will occur.

Example:

//HTML page

1 <div style="width:200px;height:200px;background:red;">
2 < input type = "button" value = "button" / >
3 </div>

1 / / three different elements trigger events
2
3 $(‘input’).click(function () {
4
5 alert (‘button triggered ‘);
6
7 });
8
9 $(‘div’).click(function () {
10
11 alert (‘div layer is triggered ‘);
12
13 });
14
15 $(document).click(function () {
16
17 alert (‘Document page triggered ‘);
18
19 });</pre>

PS: when we click a document, only the document event is triggered; When we click the div layer, we trigger the div and the document; When we click the button, the button, div and document are triggered. The order of triggering is from small range to large range. This is the so-called bubble phenomenon, layer by layer up.

JQuery provides an event object methodevent.stopPropagation(); When this method is set to the event that needs to be triggered, all upper layer bubbling will be cancelled.

$(‘input’).click(function (e) {

Alert (‘button triggered ‘);

  e.stopPropagation();

});

Prevent default behavior:

The elements in the web page will have their own default behavior when operating. For example: right click the input area of the text box, the system menu will pop up, click the hyperlink to jump to the specified page, and click the submit button to submit data.

//Prevent hyperlinks from jumping

$(‘a’).click(function (e) {  

  e.preventDefault();

});

//Prohibit form jump submission (note that it is blocked on the form)

$(‘form’).submit(function (e) {

  e.preventDefault();

});

PS: if you want the hyperlink above to block both default behavior and bubble behavior, you can write two methods at the same time: event. Stoppropagation() and event. Preventdefault(). If these two methods need to be enabled at the same time, there is another short scheme to replace them, which is to directly return false.

$(‘a’).click(function (e) {

  return false;

});