JQ 鼠标事件
程序员文章站
2022-07-12 21:47:58
...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .test2 { background: #bbffaa; } .test3 { background: yellow; } .test2,.test3{ border: 1px solid red; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <h2>.click()方法</h2> <h4>测试一</h4> <button>元素绑定事件,弹出回调中的this</button> <script type="text/javascript"> //this指向button元素 $("button:eq(0)").click(function() { alert(this) }) </script> <h4>测试二</h4> <div class="test2"> <p>$('button:first').click(function(e) {alert(this)})</p> </div> <button>指定触发事件</button> <script type="text/javascript"> $('p').click(function(e) { alert(e.target.textContent) }) //this指向button元素 $("button:eq(1)").click(function() { $('p').click() //指定触发绑定的事件 }) </script> <h4>测试三</h4> <div class="test3"> <p>$('.right').click(1111, set)</p> </div> <button>不同函数传递数据</button> <script type="text/javascript"> //不同函数传递数据 function data(e) { alert(e.data) //1111 } function a() { $("button:eq(2)").click(1111, data) } a(); </script> </body> </html>
效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .left div, .right div { width: 500px; height: 50px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <h2>.dbdblclick()方法</h2> <div class="left"> <div class="aaron"> <p>$('button:first').dblclick(function(e) {alert(this)})</p> </div> </div> <div class="right"> <div class="aaron"> <p>$('.right').dblclick(1111, set)</p> </div> </div> <button>双击触发:绑定事件this</button> <button>双击触发:指定触发事件</button> <button>双击触发:不同函数传递数据</button> <script type="text/javascript"> //this指向button元素 $("button:eq(0)").dblclick(function() { alert(this) }) </script> <script type="text/javascript"> $('p').dblclick(function(e) { alert(e.target.textContent) }) //this指向button元素 $("button:eq(1)").dblclick(function() { $('p').dblclick() //指定触发绑定的事件 }) </script> <script type="text/javascript"> //不同函数传递数据 function data(e) { alert(e.data) //1111 } function a() { $("button:eq(2)").dblclick(1111, data) } a(); </script> </body> </html>
效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .left div, .right div { width: 500px; height: 50px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <h2>.focusin()方法</h2> <div class="left"> <div class="aaron"> 点击聚焦:<input type="text" /> </div> </div> <div class="right"> <div class="aaron1"> 点击聚焦并传递参数:<input type="text" /> </div> </div> <script type="text/javascript"> //input聚焦 //给input元素增加一个边框 $("input:first").focusin(function() { $(this).css('border','2px solid red') }) </script> <script type="text/javascript"> //不同函数传递数据 function fn(e) { $(this).val(e.data) } function a() { $("input:last").focusin('阅谁问君诵,水落清香浮', fn) } a(); </script> </body> </html>
效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .left div, .right div { width: 500px; height: 50px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <h2>.focusout()方法</h2> <div class="left"> <div class="aaron"> 点击触发失去焦点:<input type="text" /> </div> </div> <div class="right"> <div class="aaron1"> 点击触发失去焦点并传递参数:<input type="text" /> </div> </div> <script type="text/javascript"> //input失去焦点 //给input元素增加一个边框 $("input:first").focusout(function() { $(this).css('border','2px solid red') }) </script> <script type="text/javascript"> //不同函数传递数据 function fn(e) { $(this).val(e.data) } function a() { $("input:last").focusout('阅谁问君诵,水落清香浮', fn) } a(); </script> </body> </html>
效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .left div, .right div { width: 350px; height: 150px; padding: 5px; margin: 5px; border: 1px solid #ccc; } p { height: 50px; border: 1px solid red; margin: 30px; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <h2>.hover()方法</h2> <div class="left"> <div class="aaron1"> <p>触发hover事件</p> </div> </div> <script type="text/javascript"> // hover()方法是同时绑定 mouseenter和 mouseleave事件。 // 我们可以用它来简单地应用在 鼠标在元素上行为 $("p").hover( function() { $(this).css("background", 'red'); }, function() { $(this).css("background", '#bbffaa'); } ); </script> </body> </html>
效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .test2 { background: #bbffaa; } .test3 { background: yellow; } .test2, .test3 { border: 1px solid red; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <h2>.mousedown()方法</h2> <h4>测试一</h4> <button>弹出回调中的鼠标键</button> <script type="text/javascript"> //this指向button元素 $("button:eq(0)").mousedown(function(e) { alert('e.which: ' + e.which) }) </script> <h4>测试二</h4> <div class="test2"> <p>$('button:first').mousedown(function(e) {alert(this)})</p> </div> <button>指定触发事件</button> <script type="text/javascript"> $('p').mousedown(function(e) { alert(e.target.textContent) }) //this指向button元素 $("button:eq(1)").mousedown(function() { $('p').mousedown() //指定触发绑定的事件 }) </script> <h4>测试三</h4> <div class="test3"> <p>$('.right').mousedown(1111, set)</p> </div> <button>不同函数传递数据</button> <script type="text/javascript"> //不同函数传递数据 function data(e) { alert(e.data) //1111 } function a() { $("button:eq(2)").mousedown(1111, data) } a(); </script> </body> </html>
效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .left div, .right div { width: 350px; height: 150px; padding: 5px; margin: 5px; border: 1px solid #ccc; } p{ height: 50px; border: 1px solid red; margin: 30px; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <h2>.mouseover()方法</h2> <div class="left"> <div class="aaron1"> <p>鼠标离开此区域触发mouseover事件</p> <a>mouseover事件触发次数:</a><br/> <a>mouseover冒泡事件触发次数:</a> </div> </div> <h2>.mouseenter()方法</h2> <div class="right"> <div class="aaron2"> <p>鼠标离开此区域触发mouseenter事件</p> <a>mouseenter事件触发次数:</a><br/> <a>mouseenter冒泡事件触发次数:</a> </div> </div> <br/> <script type="text/javascript"> var i = 0; $(".aaron1 p").mouseover(function(e) { $(".aaron1 a:first").html('mouseover事件触发次数:' + (++i)) }) var n = 0; $(".aaron1").mouseover(function() { $(".aaron1 a:last").html('mouseover冒泡事件触发次数:' + (++n)) }) </script> <script type="text/javascript"> var i = 0; $(".aaron2 p").mouseenter(function(e) { $(".aaron2 a:first").html('mouseenter事件触发次数:' + (++i)) }) var n = 0; $(".aaron2").mouseenter(function() { $(".aaron2 a:last").html('mouseenter冒泡事件触发次数:' + (++n)) }) </script> </body> </html>
效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .left div, .right div { width: 350px; height: 150px; padding: 5px; margin: 5px; border: 1px solid #ccc; } p{ height: 50px; border: 1px solid red; margin: 30px; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <h2>.mouseout()方法</h2> <div class="left"> <div class="aaron1"> <p>鼠标离开此区域触发mouseout事件</p> <a>mouseout事件触发次数:</a><br/> <a>mouseout冒泡事件触发次数:</a> </div> </div> <h2>.mouseleave()方法</h2> <div class="right"> <div class="aaron2"> <p>鼠标离开此区域触发mouseleave事件</p> <a>mouseleave事件触发次数:</a><br/> <a>mouseleave冒泡事件触发次数:</a> </div> </div> <br/> <script type="text/javascript"> var i = 0; $(".aaron1 p").mouseout(function(e) { $(".aaron1 a:first").html('mouseout事件触发次数:' + (++i)) }) var n = 0; $(".aaron1").mouseout(function() { $(".aaron1 a:last").html('mouseout冒泡事件触发次数:' + (++n)) }) </script> <script type="text/javascript"> var i = 0; $(".aaron2 p").mouseleave(function(e) { $(".aaron2 a:first").html('mouseleave事件触发次数:' + (++i)) }) var n = 0; $(".aaron2").mouseleave(function() { $(".aaron2 a:last").html('mouseleave冒泡事件触发次数:' + (++n)) }) </script> </body> </html>
效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .left div, .right div { width: 300px; height: 80px; padding: 5px; margin: 5px; border: 1px solid #ccc; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <h2>.mousemove()方法</h2> <h4>测试一</h4> <button>点击:指定触发mousemove事件</button> <script type="text/javascript"> $('h2').mousemove(function(e) { alert('触发h2元素绑定的mousemove') }) $("button:eq(0)").click(function(e) { $('h2').mousemove() //指定触发绑定的事件 }) </script> <h4>测试二</h4> <div class="left"> <div class="aaron1"> <p>鼠标在绿色区域移动触发mousemove</p> <p>移动的X位置:</p> </div> </div> <script type="text/javascript"> //绑定一个mousemove事件 //触发后修改内容 $(".aaron1").mousemove(function(e) { $(this).find('p:last').html('移动的X位置:' + e.pageX) }) </script> <h4>测试三</h4> <div class="right"> <div class="aaron3"> <p>鼠标移动:不同函数传递数据</p> <p>数据:</p> </div> </div> <script type="text/javascript"> //不同函数传递数据 function data(e) { $(this).find('p:last').html('数据:' + e.data) } function a() { $(".right").mousemove(1111, data) } a(); </script> </body> </html>
效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .left div, .right div { width: 350px; height: 150px; padding: 5px; margin: 5px; border: 1px solid #ccc; } p{ height: 50px; border: 1px solid red; margin: 30px; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <h2>.mouseout()方法</h2> <div class="left"> <div class="aaron1"> <p>鼠标离开此区域触发mouseout事件</p> <a>离开元素,mouseout事件触发次数:</a> </div> </div> <div class="right"> <div class="aaron2"> <p>鼠标移动:不同函数传递数据</p> <a>离开元素,mouseout事件触发次数:</a> </div> </div> <br/> <button>点击:指定触发mouseout事件</button> <script type="text/javascript"> var n = 0; //绑定一个mouseout事件 $(".aaron1 p:first").mouseout(function(e) { $(".aaron1 a").html('离开元素,mouseout事件触发次数:' + (++n)) }) </script> <script type="text/javascript"> $('h2').mouseout(function(e) { alert('触发h2元素绑定的mouseout') }) $("button:eq(0)").click(function(e) { $('h2').mouseout() //指定触发绑定的事件 }) </script> <script type="text/javascript"> var n = 0; //不同函数传递数据 function data(e) { $(".right a").html('mouseout事件触发次数:' + (++n) + '<br/> 传入数据为 :'+ e.data) } function a() { $(".right p:first").mouseout('data = 吴者然', data) } a(); </script> </body> </html>
效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .left div, .right div { width: 350px; height: 150px; padding: 5px; margin: 5px; border: 1px solid #ccc; } p{ height: 50px; border: 1px solid red; margin: 30px; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <h2>.mouseover()方法</h2> <div class="left"> <div class="aaron1"> <p>鼠标移进此区域触发mouseover事件</p> <a>进入元素内部,mouseover事件触发次数:</a> </div> </div> <div class="right"> <div class="aaron2"> <p>鼠标移动:不同函数传递数据</p> <a>进入元素内部,mouseover事件触发次数:</a> </div> </div> <br/> <button>点击:指定触发mouseover事件</button> <script type="text/javascript"> var n = 0; //绑定一个mouseover事件 $(".aaron1 p:first").mouseover(function(e) { $(".aaron1 a").html('进入元素内部,mouseover事件触发次数:' + (++n)) }) </script> <script type="text/javascript"> $('h2').mouseover(function(e) { alert('触发h2元素绑定的mouseover') }) $("button:eq(0)").click(function(e) { $('h2').mouseover() //指定触发绑定的事件 }) </script> <script type="text/javascript"> var n = 0; //不同函数传递数据 function data(e) { $(".right a").html('mouseover事件触发次数:' + (++n) + '<br/> 传入数据为 :'+ e.data) } function a() { $(".right p:first").mouseover('data = 吴者然', data) } a(); </script> </body> </html>
效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .left div, .right div { width: 500px; height: 50px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <h2>.mouseup()方法</h2> <div class="left"> <div class="aaron"> <p>$('button:first').mouseup(function(e) {alert(this)})</p> </div> </div> <div class="right"> <div class="aaron"> <p>$('.right').mouseup(1111, set)</p> </div> </div> <button>绑定事件this</button> <button>指定触发事件</button> <button>不同函数传递数据</button> <script type="text/javascript"> //this指向button元素 $("button:eq(0)").mouseup(function(e) { alert('e.which: ' + e.which) }) </script> <script type="text/javascript"> $('p').mouseup(function(e) { alert(e.target.textContent) }) //this指向button元素 $("button:eq(1)").mouseup(function() { $('p').mouseup() //指定触发绑定的事件 }) </script> <script type="text/javascript"> //不同函数传递数据 function data(e) { alert(e.data) //1111 } function a() { $("button:eq(2)").mouseup(1111, data) } a(); </script> </body> </html>
效果图: