JQuery Event Object Summary _jquery

I do not understand the event of jquery, search a lot about the jquery event, the introduction of the following I will record, there is a need to understand the use of the jquery event events to refer to friends. I hope this article will be of some help to you.

Learning points:

Event object bubbling and blocking default behavior

One, Event object

In JS, we have discussed in detail JS event object, here to pick a few common discussion

<code class= "Hljs xml" ></code><div><code class= "Hljs xml" >
  <input type= "text" >
</code></div>

1.event.type property gets the trigger event name

<code class= "Hljs JavaScript" >$ ("div"). Click (function (e) {
  console.log (e.type);    Click
});</code>

2.event.target gets the element that binds the DOM

<code class= "Hljs JavaScript" >$ ("div"). Click (function (e) {
  console.log (e.target);   Div
});</code>

3.event.data gets extra data, which can be numbers, strings, arrays, objects

<code class= "Hljs JavaScript" >$ ("div"). Bind ("click", {"name": "Zhang", "Age": M}, Function (e) {for
  (var i) N e.data) {
    Console.log (i + "=" + E.data[i]);
  }
) </code>

4.event.relatedtarget gets the DOM element that moves in and out of the destination point

<code class= "Hljs JavaScript" >$ ("div"). MouseOver (function (e) {
  console.log (e.relatedtarget);    Body
});</code>

5.event.currenttarget gets the bound DOM element, which is equal to this, the difference with the Event.target

<code class= "Hljs xml" ><ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul></code>
<code class= "Hljs JavaScript" >//event delegate
$ ( "UL"). Click (function (e) {
  console.log (e.target);   Li
});
$ ("ul"). Click (function (e) {
  console.log (e.currenttarget);    UL
});</code>

Ps:target indicates that the dom,currenttarget that triggered the event represents the element of the binding event 6.event.result represents the value of getting the last event

<code class= "Hljs lua" ></code><div><code class= "Hljs lua" >
  <input type= "text" >
$ ("div"). Click (function () {return
  "123";
});
$ ("div"). Click (function (e) {
  console.log (e.result);   123
});</code></div>

7.event.timestamp Get current time stamp

<code class= "Hljs JavaScript" >$ ("div"). Click (function (e) {
  console.log (e.timestamp);
}); </code>

8.event.which get the left and right mouse button

<code class= "Hljs JavaScript" >$ ("div"). MouseDown (function (e) {
  var key = ';
  Switch (E.which) {case
    1:
      key = "left button";
      break;
    Case 2:
      key = "Middle key";
      break;
    Case 3:
      key = "right button";
      break;
  Console.log (key);
}; </code>

At the same time Event.which can also get keys on the keyboard

<code class= "Hljs JavaScript" >$ ("Input"). KeyUp (function (e) {
  console.log (E.which);
}); </code>

9.event.ctrlkey determines whether the CTRL key is pressed

<code class= "Hljs JavaScript" >$ ("Input"). KeyUp (function (e) {
  console.log (e.ctrlkey);   Return Boolean
}) </code>

10. Get the current location of the mouse

<code class= "Hljs avrasm" >$ (document). Click (function (e) {
  console.log ("ScreenX:" + E.screenx);
  Console.log ("Pagex:" + E.pagex);
  Console.log ("ClientX:" + e.clientx);
}); </code>

Two Bubbling and default behavior 1. event bubbling and blocking bubbles first take a look at a bubbling example

<code class= "Hljs php" ></code><div><code class= "Hljs php" >
  <input type= "button" value = "button" >
$ ("input"). Click (function () {
  Console.log ("button is triggered");
$ ("div"). Click (function () {
  Console.log ("div is triggered");
$ (document). Click (function () {
  Console.log ("document is triggered");
When the button is clicked, three events are triggered
///When the div is clicked, the Div and document are triggered
//When the document is clicked, only the document event is triggered </code></div>

Now let's stop bubbling and see the results.

<code class= "Hljs JavaScript" >$ ("Input"). Click (function (e) {
  console.log ("button is triggered");
  E.stoppropagation ();
});
$ ("div"). Click (function (e) {
  console.log ("div is triggered");
  E.stoppropagation ();
});
$ (document). Click (function () {
  Console.log ("document is triggered");
</code>

No matter how you click the button and the Div, it can only trigger your own time, because bubbling is blocked

2. Block default behavior

<code class= "Hljs lua" ></code><div><code class= "Hljs Lua" > 
$ ("a"). Click (Function (E) C14/>e.preventdefault ();
}); </code></div>

3. Prevent default behavior and bubbling at the same time

<code class= "Hljs JavaScript" >$ ("a"). Click (function (e) {
  console.log ("a");
  E.stoppropagation ();
  E.preventdefault ();
});
$ ("div"). Click (function () {
  console.log ("div");
}); </code>

or use return false;

<code class= "Hljs JavaScript" >$ ("a"). Click (function (e) {
  console.log ("a");
  return false;
});
$ ("div"). Click (function () {
  console.log ("div");
}); </code>

3. Some ways to block event bubbling and default behavior

Determines whether the default behavior is canceled

<code class= "Hljs JavaScript" >$ ("a"). Click (function (e) {
  e.preventdefault ();
  Console.log (e.isdefaultprevented ());  True
}) </code>

Cancel bubbling after the subsequent event handler function is canceled

<code class= "Hljs JavaScript" >$ ("a"). Click (function (e) {
  console.log ("a");
  E.preventdefault ();   Three all triggers
  //e.stoppropagation ();//triggers the first two
  //e.stopimmediatepropagation ();  Triggers only the first
});
$ ("a"). Click (function () {
  Console.log ("I am a");
}); 
$ (document). Click (function () {
  Console.log ("I am Document");
}) </code>

Determines whether the Stoppropagation () method is invoked

<code class= "Hljs JavaScript" >$ ("div"). Click (function (e) {
  e.stoppropagation ();
  Console.log (e.ispropagationstopped ()); True
}) </code>
determines whether the Stopimmediatepropagation () method is executed
<code class= "Hljs JavaScript" >$ (' Div '). Click (function (e) {
  e.stopimmediatepropagation ();
  Console.log (e.isimmediatepropagationstopped ());   True
});</code>

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.