事件对象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" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { // 实时监听input输入框 有输入触发fun 用于一些实时校验用户的输入数据，实时反馈输入校验结果 // e 事件本身 e.target就是事件对应的js对象 类似于 this $('input').get(0).oninput = function (e) { console.log(e); console.log(e.target); console.log(e.target.value); $('.content').text(e.target.value); }; // e.target === this e.currentTarget当前事件的目标对象 e.target事件的触发对象 $('button').click(function (e) { console.log(e.currentTarget); console.log(e.target); console.log(e.target.innerText); console.log($(e.target).text()); console.log($(this).text()); console.log(e == this); // false e是jquery对象 this是js对象 console.log(e.target == this); // true console.log(e.target === this); // true e.stopPropagation(); // 阻止冒泡 }); $('body').click(function(e){ console.log(e.currentTarget); // 事件的目标js对象 点的哪个元素就是哪个 如button input console.log(e.target); // 事件触发js对象 即 body console.log(this); // 事件触发js对象 即 body console.log(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单双击事件
<!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; $('button').click(function (e) { // 这个清除上一次单击的事件，因为每次单击创建的timer不一样； // 下面双击事件清除的timer是最后一次单击创建的timer，第一次创建的timer那里并不能清除。 clearTimeout(timer); timer = setTimeout(function (e) { console.log('单击咯'); },300); console.log('click',timer); e.stopPropagation(); }); $('button').dblclick(function (e) { console.log('dblclick',timer); clearTimeout(timer); console.log('双击咯'); e.stopPropagation(); }); }) </script> </body> </html>
jquery鼠标移入事件
<!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" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { // mouseover mouseout 鼠标移入移出 这里会有穿透现象，同样作用在其子元素上面 // 如下 当鼠标从子元素移动到父元素内的时候也会触发事件 $('#f1').mouseover(function (e) { console.log('警告，不明物体侵入！！！'); }); $('#f1').mouseout(function (e) { console.log('警告解除，不明物体滚了！！！'); }); // mouseenter mouseleave 鼠标移入移出 这里不会有穿透现象，不作用在其子元素上面 // 如下 当鼠标从子元素移动到父元素内的时候不会触发事件 $('#f2').mouseenter(function (e) { console.log('警告，不明物体侵入！！！'); }); $('#f2').mouseleave(function (e) { console.log('警告解除，不明物体滚了！！！'); }); }) </script> </body> </html>