JQuery Event Object

Learning Essentials:

• Event Object
• Bubbling and blocking default behavior

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

<div style="width:200px;height:200px;background:green;">    <input type="text"/></div>

1.event.type property gets the trigger event name

$("div").click(function (e) {    console.log(e.type);        // click});

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

$("div").click(function (e) {    console.log(e.target);      // div});

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

$("div").bind("click", {"name""zhang""age"20function (e) {    for(varin e.data) {        " = " + e.data[i]);    }})

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

$("div").mouseover(function (e) {    console.log(e.relatedTarget);       // body});

5.event.currenttarget gets the bound DOM element, which is equivalent to this, and the difference between the Event.target

<ul   <li ;  item1    </li ;  <li ;  item2</li ;  <li  >  item3</li ;  ul ;   

// 事件委托$("ul").click(function (e) {    console.log(e.target);      // li});$("ul").click(function (e) {    console.log(e.currentTarget);       // ul});

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 the last event obtained

<div style="width:200px;height:200px;background:green;">    type="text"/></div>$("div").click(function () {    return"123";});$("div").click(function (e) {    console.log(e.result);      123});

7.event.timestamp getting the current timestamp

$("div").click(function (e) {    console.log(e.timeStamp);});

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

$ ( "div" ). MouseDown ( Span class= "hljs-function" >function   (e)  {     var  key =  "; switch  (E.which) {case  1 : Key =  "left Key" ;        break ; case             2 : Key =  "Middle Key" ;        break ; case             3 : Key =  "right Button" ;    break ; } console.log (key);});  

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

$("input").keyup(function (e) {    console.log(e.which);});

9.event.ctrlkey determine if the CTRL key is pressed

$("input").keyup(function (e) {    console.log(e.ctrlKey);     // 返回布尔值})

10. Get the current position of the mouse

$(document).click(function (e) {    console.log("screenX: " + e.screenX);    console.log("pageX: " + e.pageX);    console.log("clientX: " + e.clientX);});

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

<div style="width:200px;height:200px;background:red;"> <input type="button"Value="button"/></div>$ ("Input"). Click ( function () {Console.log ("button is triggered");}); $("Div"). Click ( function () {Console.log ("Div is triggered");}); $ (document). Click ( function () {Console.log ("document is triggered");});Three events are triggered when a button is clickedDiv and document are triggered when a div is clicked//When you click Document, only the document event is triggered

Now let's stop bubbling and see the results.

$("input").click(function (e) {    console.log("按钮被触发");    e.stopPropagation();});$("div").click(function (e) {    console.log("div被触发");    e.stopPropagation();});$(document).click(function () {    console.log("document被触发");});

No matter how you click the button and Div, it can only trigger its own time, because bubbling is blocked
2. Block default behavior

<div style="width:200px;height:200px;background:red;">    <a href="http://www.yc60.com">web瓢城俱乐部</a></div>$("a").click(function (e) {    e.preventDefault();});

3. Also block default behavior and bubbling

$("a").click(function (e) {    console.log("a");    e.stopPropagation();    e.preventDefault();});$("div").click(function () {    console.log("div");});

or use return false;

$("a").click(function (e) {    console.log("a");    returnfalse;});$("div").click(function () {    console.log("div");});

3. Some ways to block event bubbling and default behavior
Determines whether the default behavior is canceled

$("a").click(function (e) {    e.preventDefault();    console.log(e.isDefaultPrevented());    // true})

Cancel subsequent event handler functions after bubbling

$("a").click(function (e) {    console.log("a");    // e.preventDefault();      // 三个都触发    // e.stopPropagation(); // 触发前两个    // e.stopImmediatePropagation();    // 只触发第一个});$("a").click(function () {    console.log("i am a");}); $(document).click(function () {    console.log("i am document");})

Determine if the Stoppropagation () method is called

$("div").click(function (e) {    e.stopPropagation();    console.log(e.isPropagationStopped());  // true})

Determine if the Stopimmediatepropagation () method is executed

$(‘div‘).click(function (e) {    e.stopImmediatePropagation();    console.log(e.isImmediatePropagationStopped());     // true});

JQuery Event Object