JQuery event object summary and jquery event Summary

JQuery event object summary and jquery event Summary

I am not familiar with jquery event. I have searched for a lot of Introduction to jquery event Events. Here I will record it. For more information about jquery event usage, see. I hope this article will help you.

Learning points:

Event object bubbling and blocking default behavior

I. event object

In JS, we have discussed the JS event objects in detail. Here we will pick up some common discussions.

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

1. Obtain the trigger event name from the event. type attribute.

<code class=" hljs javascript">$("div").click(function (e) {  console.log(e.type);    // click});</code>

2.event.tar get the element bound to the DOM

<code class=" hljs javascript">$("div").click(function (e) {  console.log(e.target);   // div});</code>

3. event. data obtains additional data, which can be numbers, strings, arrays, and objects.

<code class=" hljs javascript">$("div").bind("click", {"name" : "zhang", "age" : 20}, function (e) {  for(var i in e.data) {    console.log(i + " = " + e.data[i]);  }})</code>

4. event. relatedTarget gets the DOM element that is moved out or into the target 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 equivalent to this. Difference from event.tar get

<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) {lele.log(e.tar get); // li}); $ ("ul "). click (function (e) {console. log (e. currentTarget); // ul}); </code>

PS: target indicates the DOM of the event to be triggered. currentTarget indicates the element of the event to be bound. 6. event. result indicates obtaining the value of 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 the current timeStamp

<code class=" hljs javascript">$("div").click(function (e) {  console.log(e.timeStamp);});</code>

8. event. which: Right-click the left corner of the mouse

<Code class = "hljs javascript"> $ ("div "). mousedown (function (e) {var key = ''; switch (e. which) {case 1: key = ""; break; case 2: key = ""; break; case 3: key = ""; break;} console. log (key) ;}); </code>

At the same time, event. which can also obtain the 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); // returns a Boolean value}) </code>

10. Get the current mouse position

<code class=" hljs avrasm">$(document).click(function (e) {  console.log("screenX: " + e.screenX);  console.log("pageX: " + e.pageX);  console.log("clientX: " + e.clientX);});</code>

Ii. Bubbling and default behavior 1. Event bubbling and blocking bubbling first let's take a look at a bubble example

<Code class = "hljs php"> </code> <div> <code class = "hljs php"> <input type = "button" value = "button" >$ ("input "). click (function () {console. log ("button triggered") ;}; $ ("div "). click (function () {console. log ("div triggered") ;}; $ (document ). click (function () {console. log ("document triggered") ;}); // when you click the button, all three events are triggered // when you click the div, div and document are triggered. // when you click document, only the document event is triggered. </code> </div>

Now let's stop the bubble and check the result.

<Code class = "hljs javascript" >$ ("input "). click (function (e) {console. log ("button triggered"); e. stopPropagation () ;}); $ ("div "). click (function (e) {console. log ("div triggered"); e. stopPropagation () ;}); $ (document ). click (function () {console. log ("document triggered") ;}); </code>

No matter how you click the button or div, it can only trigger its own time, because the bubble is blocked

2. prevent default behavior

<code class=" hljs lua"></code><div><code class=" hljs lua"> $("a").click(function (e) {  e.preventDefault();});</code></div>

3. Both the default behavior and bubble behavior are blocked.

<code class=" hljs javascript">$("a").click(function (e) {  console.log("a");  e.stopPropagation();  e.preventDefault();});$("div").click(function () {  console.log("div");});</code>

Or return false;

<code class=" hljs javascript">$("a").click(function (e) {  console.log("a");  return false;});$("div").click(function () {  console.log("div");});</code>

3. Some methods to prevent event bubbling and default behavior

Determine whether the default behavior is canceled

<code class=" hljs javascript">$("a").click(function (e) {  e.preventDefault();  console.log(e.isDefaultPrevented());  // true})</code>

Cancels the subsequent event processing function after the bubble is canceled.

<Code class = "hljs javascript" >$ (""). click (function (e) {console. log ("a"); // e. preventDefault (); // trigger all three; // e. stopPropagation (); // trigger the first two // e. stopImmediatePropagation (); // only trigger the first}); $ (""). click (function () {console. log ("I am a") ;}); $ (document ). click (function () {console. log ("I am document") ;}) </code>

Determine whether the stopPropagation () method is called

<Code class = "hljs javascript"> $ ("div "). click (function (e) {e. stopPropagation (); console. log (e. isPropagationStopped (); // true}) </code> determine 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 all the content of this article. I hope it will be helpful for your learning and support for helping customers.