The event object event
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件对象event</title> </head> <body> <button>按钮</button> <input type="text" name="user" value="123"> <p class="content"></p> < Script type = "text / JavaScript" the src = "jQuery-3.3.1.js" > </ Script > < Script type = "text / JavaScript" > $ ( function () { // monitored in real time input box input input trigger fun for some input data real-time check of the user, real-time feedback input check result // E is an event corresponding to the event itself e.target js objects similar to the this $ ( ' iNPUT ' ) .get ( 0 ) .oninput = function (E) { the console.log (E); the console.log (e.target); the console.log (e.target.value); $ ( ' .Content ') .text (e.target.value); }; // trigger target audiences e.target === this e.currentTarget current event e.target event $ ( ' Button ' ) .click ( function (E) { the console.log (e.currentTarget); the console.log (e.target); the console.log (e.target.innerText); the console.log ($ (e.target) .text ()); the console.log ( $ ( this ) .text ()); the console.log (E == this ); // to false E jquery object is an object js this is the console.log (e.target == this ); // to true the console.log (e.target === the this ); // to true e.stopPropagation (); // prevent bubbling }); $ ( ' body ' ) .click ( function (E) { console.log (e.currentTarget); // which elements of the target object is js point of the event which is the INPUT as the Button console.log (e.target); // event that is triggered js objects body console.log ( the this ); // event trigger js objects namely body the console.log ( the this === e.currentTarget); console.log(this===e.target); e.stopPropagation(); // 阻止冒泡 }); $('html').click(function(e){ // console.log(e.currentTarget); console.log(e.target); console.log(this===e.currentTarget); console.log(this===e.target); }); }) </script> </body> </html>
jquery single double click event
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单双击事件jquery</title> </head> <body> <button>按钮</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $ ( Function () { timer = null ; $ ( ' the Button ' ) .click ( function (E) { // this event, click Clear once, because each time you click to create a timer is not the same; // double click below event timer is cleared, click to create the last timer, the first timer can not be cleared, and there is created. the clearTimeout (timer); timer = the setTimeout ( function (E) { the console.log ( ' click slightly ' ); } , 300 ); the console.log ( ' the Click ',timer); e.stopPropagation(); }); $('button').dblclick(function (e) { console.log('dblclick',timer); clearTimeout(timer); console.log('双击咯'); e.stopPropagation(); }); }) </script> </body> </html>
jquery mouse moved events
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery鼠标移入</title> <style type="text/css"> .father{ width: 200px; height: 200px; background-color:red; } .child{ width: 50px; height: 50px; background-color: green; } </style> </head> <body> <div class="father" id="f1"> <p class="child" id="c1">steven</p> </div> <div class="father" id="f2"> <p class= "Child" ID = "C2" > Steven </ P > </ div > < Script type = "text / JavaScript" the src = "jQuery-3.3.1.js" > </ Script > < Script type = "text / JavaScript " > $ ( function () { // mouseOver mouseout mouse moved out here will penetrate the phenomenon, the same role in their child elements above // follows when the mouse is moved from the sub-element to the parent element within time will trigger events $ ( ' # f1 ' ).mouseover(function (e) { console.log('Warning, unknown object invasion! ! ! ' ); }); $ ( ' # F1 ' ) .mouseout ( function (E) { the console.log ( ' warning release, unknown object roll !!! ' ); }); // MouseEnter mouse moved out here MouseLeave phenomenon will not penetrate, it does not act on the above child elements // as the mouse moves from the time the sub-elements to the parent element will not trigger event $ ( ' # F2 ' ) .mouseenter ( function (E) { Console. log ( ' warning, unknown object intrusion !!! ' ); }); $ ( ' # F2 ') .mouseleave ( function (E) { the console.log ( ' warning release, unknown object roll !!! ' ); }); }) </ Script > </ body > </ HTML >