jQuery鼠标事件之click与dbclick事件

用交互操作中，最简单直接的操作就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。这两个方法的用法是类似的，下面以click()事件为例

使用上非常简单：

方法一：$ele.click()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

  1. <div id="test">点击触发<div>
  2. $("ele").click(function(){
  3.     alert('触发指定事件')
  4. })
  5. $("#test").click(function(){
  6.      $("ele").click()  //手动指定触发事件
  7. });

方法二：$ele.click( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素

  1. <div id="test">点击触发<div>
  2. $("#test").click(function() {
  3.     //this指向 div元素
  4. });

方法三：$ele.click( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

  1. <div id="test">点击触发<div>
  2. $("#test").click(11111,function(e) {
  3.     //this指向 div元素
  4.     //e.date  => 11111 传递数据
  5. });

dblclick()的用法和click()的用法是类似的，可以参考以上click()的用法。

dbclick与click事件不同的是：

click事件触发需要以下几点：

  • click事件其实是由mousedown与mouseup 2个动作构成，所以点击的动作只有在松手后才触发

PS:mousedown和mouseup下一节会讲到

dblclick事件触发需要以下几点：

dblclick又是由2个click叠加而来的，所以dblclick事件只有在满足以下条件的情况下才能被触发

  • 鼠标指针在元素里面时点击。
  • 鼠标指针在元素里面时释放。
  • 鼠标指针在元素里面时再次点击，点击间隔时间，是系统而定。
  • 鼠标指针在元素里面时再次释放。

注意：在同一元素上同时绑定 click 和 dblclick 事件是不可取的。各个浏览器事件触发的顺序是不同的，一些浏览器在dblclick之前接受两个 click 事件 ，而一些浏览器只接受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .test2 {
  9.         background: #bbffaa;
  10.     }
  11.     .test3 {
  12.         background: yellow;
  13.     }
  14.     .test2,.test3{
  15.         border: 1px solid red;
  16.     }
  17.     </style>
  18.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  19. </head>
  20.  
  21. <body>
  22.     <h2>.click()方法</h2>
  23.  
  24.     <h4>测试一</h4>
  25.     <button>元素绑定事件,弹出回调中的this</button>
  26.     <script type="text/javascript">
  27.         //this指向button元素
  28.          $("button:eq(0)").click(function() {
  29.             alert(this)
  30.         })
  31.     </script>
  32.  
  33.     <h4>测试二</h4>
  34.     <div class="test2">
  35.         <p>$('button:first').click(function(e) {alert(this)})</p>
  36.     </div>
  37.     <button>指定触发事件</button>
  38.     <script type="text/javascript">
  39.         $('p').click(function(e) {
  40.             alert(e.target.textContent)
  41.         })
  42.         //this指向button元素
  43.         $("button:eq(1)").click(function() {
  44.             $('p').click() //指定触发绑定的事件
  45.         })
  46.     </script>
  47.  
  48.     <h4>测试三</h4>
  49.     <div class="test3">
  50.         <p>$('.right').click(1111, set)</p>
  51.     </div>
  52.  
  53.     <button>不同函数传递数据</button>
  54.     <script type="text/javascript">
  55.  
  56.         //不同函数传递数据
  57.         function data(e) {
  58.             alert(e.data) //1111
  59.         }
  60.         function a() {
  61.             $("button:eq(2)").click(1111, data)
  62.         }
  63.         a();
  64.     </script>
  65. </body>
  66.  
  67. </html>

jQuery鼠标事件之mousedown与mouseup事件

用户交互操作中，最简单直接的操作就是点击操作，因此jQuery提供了一个mousedown的快捷方法可以监听用户鼠标按下的操作，与其对应的还有一个方法mouseup快捷方法可以监听用户鼠标弹起的操作。两种方法用法类似，下面以mousedown()为例

使用上非常简单：

方法一：$ele.mousedown()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，可能一般用的比较少

  1. <div id="test">点击触发<div>
  2. $("ele").mousedown(function(){
  3.     alert('触发指定事件')
  4. })
  5. $("#test").mousedown(function(){
  6.      $("ele").mousedown()  //手动指定触发事件
  7. });

方法二：$ele.mousedown( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

  1. <div id="test">点击触发<div>
  2. $("#test").mousedown(function() {
  3.     //this指向 div元素
  4. });

方法三：$ele.mousedown( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

  1. <div id="test">点击触发<div>
  2. $("#test").mousedown(11111,function(e) {
  3.     //this指向 div元素
  4.     //e.date  => 11111 传递数据
  5. });

mousedown事件触发需要以下几点：

  • mousedown强调是按下触发
  • 如果在一个元素按住了鼠标不放，并且拖动鼠标离开这个元素，并释放鼠标键，这仍然是算作mousedown事件
  • 任何鼠标按钮被按下时都能触发mousedown事件
  • 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

mouseup事件触发需要以下几点：

  • mouseup强调是松手触发，与mousedown是相反的
  • mouseup与mousedown组合起来就是click事件
  • 如果用户在一个元素上按下鼠标按键，并且拖动鼠标离开这个元素，然后释放鼠标键，这仍然是算作mouseup事件
  • 任何鼠标按钮松手时都能触发mouseup事件
  • 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

另外需要注意的是：

click与mousedown的区别：

  • click事件其实是由mousedown于mouseup 2个动作构成，所以点击的动作只有在松手后才触发
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .test2 {
  9.         background: #bbffaa;
  10.     }
  11.  
  12.     .test3 {
  13.         background: yellow;
  14.     }
  15.  
  16.     .test2,
  17.     .test3 {
  18.         border: 1px solid red;
  19.     }
  20.     </style>
  21.     </style>
  22.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  23. </head>
  24.  
  25. <body>
  26.     <h2>.mousedown()方法</h2>
  27.  
  28.     <h4>测试一</h4>
  29.     <button>弹出回调中的鼠标键</button>
  30.     <script type="text/javascript">
  31.     //this指向button元素
  32.     $("button:eq(0)").mousedown(function(e) {
  33.         alert('e.which: ' + e.which)
  34.     })
  35.     </script>
  36.  
  37.     <h4>测试二</h4>
  38.     <div class="test2">
  39.         <p>$('button:first').mousedown(function(e) {alert(this)})</p>
  40.     </div>
  41.     <button>指定触发事件</button>
  42.     <script type="text/javascript">
  43.     $('p').mousedown(function(e) {
  44.             alert(e.target.textContent)
  45.         })
  46.         //this指向button元素
  47.     $("button:eq(1)").mousedown(function() {
  48.         $('p').mousedown() //指定触发绑定的事件
  49.     })
  50.     </script>
  51.  
  52.     <h4>测试三</h4>
  53.     <div class="test3">
  54.         <p>$('.right').mousedown(1111, set)</p>
  55.     </div>
  56.     <button>不同函数传递数据</button>
  57.     <script type="text/javascript">
  58.     //不同函数传递数据
  59.     function data(e) {
  60.         alert(e.data) //1111
  61.     }
  62.  
  63.     function a() {
  64.         $("button:eq(2)").mousedown(1111, data)
  65.     }
  66.     a();
  67.     </script>
  68. </body>
  69.  
  70. </html>

jQuery鼠标事件之mousemove事件

用交互操作中，经常需要知道用户是否有移动的操作。基于移动的机制可以做出拖动、拖拽一系列的效果出来。针对移动事件，jQuery提供了一个mousemove的快捷方法可以监听用户移动的的操作

使用上非常简单：

方法一：$ele.mousemove()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

  1. <div id="test">点击触发<div>
  2. $("ele").mousemove(function(){
  3.     alert('触发指定事件')
  4. })
  5. $("#test").click(function(){
  6.      $("ele").mousemove()  //指定触发事件
  7. });

方法二：$ele.mousemove( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

  1. <div id="test">滑动触发<div>
  2. $("#test").mousemove(function() {
  3.     //this指向 div元素
  4. });

方法三：$ele.mousemove( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

  1. <div id="test">点击触发<div>
  2. $("#test").mousemove(11111,function(e) {
  3.     //this指向 div元素
  4.     //e.date  => 11111 传递数据
  5. });

mousemove事件触发需要以下几点：

  • mousemove事件是当鼠标指针移动时触发的，即使是一个像素
  • 如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .left div,
  9.     .right div {
  10.         width: 300px;
  11.         height: 80px;
  12.         padding: 5px;
  13.         margin: 5px;
  14.         border: 1px solid #ccc;
  15.     }
  16.  
  17.     .left div {
  18.         background: #bbffaa;
  19.     }
  20.  
  21.     .right div {
  22.         background: yellow;
  23.     }
  24.     </style>
  25.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  26. </head>
  27.  
  28. <body>
  29.     <h2>.mousemove()方法</h2>
  30.     <h4>测试一</h4>
  31.     <button>点击：指定触发mousemove事件</button>
  32.     <script type="text/javascript">
  33.     $('h2').mousemove(function(e) {
  34.         alert('触发h2元素绑定的mousemove')
  35.     })
  36.  
  37.     $("button:eq(0)").click(function(e) {
  38.         $('h2').mousemove() //指定触发绑定的事件
  39.     })
  40.     </script>
  41.  
  42.     <h4>测试二</h4>
  43.     <div class="left">
  44.         <div class="aaron1">
  45.             <p>鼠标在绿色区域移动触发mousemove</p>
  46.             <p>移动的X位置：</p>
  47.         </div>
  48.     </div>
  49.     <script type="text/javascript">
  50.     //绑定一个mousemove事件
  51.     //触发后修改内容
  52.     $(".aaron1").mousemove(function(e) {
  53.         $(this).find('p:last').html('移动的X位置：' + e.pageX)
  54.     })
  55.     </script>
  56.  
  57.     <h4>测试三</h4>
  58.     <div class="right">
  59.         <div class="aaron3">
  60.             <p>鼠标移动：不同函数传递数据</p>
  61.             <p>数据：</p>
  62.         </div>
  63.     </div>
  64.     <script type="text/javascript">
  65.     //不同函数传递数据
  66.     function data(e) {
  67.         $(this).find('p:last').html('数据:' + e.data)
  68.     }
  69.  
  70.     function a() {
  71.         $(".right").mousemove(1111, data)
  72.     }
  73.     a();
  74.     </script>
  75. </body>
  76.  
  77. </html>

jQuery鼠标事件之mouseover与mouseout事件

在学JS的时候，大家还记得有两个方法叫移入移出事件吗？onmouseover()与onmouseout()事件~

jQuery当中同样提供了这样的事件来监听用户的移入移出操作，mouseover()与mouseout()事件，两者用法类似，下面一mouseover为例：

方法一：$ele.mouseover()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

  1. <div id="test">点击触发<div>
  2. $("ele").mouseover(function(){
  3.     alert('触发指定事件')
  4. })
  5. $("#test").click(function(){
  6.      $("ele").mouseover()  //指定触发事件
  7. });

方法二：$ele.mouseover( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

  1. <div id="test">滑动触发<div>
  2. $("#test").mouseover(function() {
  3.     //this指向 div元素
  4. });

方法三：$ele.mouseover( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

  1. <div id="test">点击触发<div>
  2. $("#test").mouseover(11111,function(e) {
  3.     //this指向 div元素
  4.     //e.date  => 11111 传递数据
  5. });
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .left div,
  9.     .right div {
  10.         width: 350px;
  11.         height: 150px;
  12.         padding: 5px;
  13.         margin: 5px;
  14.         border: 1px solid #ccc;
  15.     }
  16.     p{
  17.         height: 50px;
  18.         border: 1px solid red;
  19.         margin: 30px;
  20.     }
  21.     .left div {
  22.         background: #bbffaa;
  23.     }
  24.     .right div {
  25.         background: yellow;
  26.     }
  27.     </style>
  28.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  29. </head>
  30.  
  31. <body>
  32.     <h2>mouseover与mouseout事件</h2>
  33.  
  34.     <h4>测试一</h4>
  35.     <button>点击：指定触发mouseover事件</button>
  36.     <script type="text/javascript">
  37.         $('h2').mouseover(function(e) {
  38.             alert('触发h2元素绑定的mouseover')
  39.         })
  40.         $("button:eq(0)").click(function(e) {
  41.             $('h2').mouseover() //指定触发绑定的事件
  42.         })
  43.     </script>
  44.  
  45.     <h4>测试二</h4>
  46.     <div class="left">
  47.         <div class="aaron1">
  48.             <p>鼠标移进此区域触发mouseover事件</p>
  49.             <a>进入元素内部,mouseover事件触发次数：</a>
  50.         </div>
  51.     </div>
  52.     <script type="text/javascript">
  53.         var n = 0;
  54.         //绑定一个mouseover事件
  55.         $(".aaron1 p:first").mouseover(function(e) {
  56.             $(".aaron1 a").html('进入元素内部,mouseover事件触发次数：' + (++n))
  57.         })
  58.     </script>
  59.  
  60.     <h4>测试三</h4>
  61.     <div class="right">
  62.         <div class="aaron2">
  63.             <p>鼠标移动：不同函数传递数据</p>
  64.             <a>进入元素内部,mouseover事件触发次数：</a>
  65.         </div>
  66.     </div>
  67.     <br/>
  68.     <script type="text/javascript">
  69.         var n = 0;
  70.         //不同函数传递数据
  71.         function data(e) {
  72.             $(".right a").html('mouseover事件触发次数：' + (++n) + '<br/> 传入数据为 ：'+ e.data)
  73.         }
  74.  
  75.         function a() {
  76.             $(".right p:first").mouseover('data = 慕课网', data)
  77.         }
  78.         a();
  79.  
  80.     </script>
  81. </body>
  82.  
  83. </html>

jQuery鼠标事件之mouseenter与mouseleave事件

用交互操作中，经常需要知道用户操作鼠标是否有移到元素内部或是元素外部，因此jQuery提供了一个mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作

使用上非常简单，三种参数传递方式与mouseover和mouseout是一模一样的，所以这里不再重复，主要讲讲区别，下面以mouseenter为例：

mouseenter JavaScript事件是Internet Explorer专有的。由于该事件在平时很有用，jQuery的模拟这一事件，以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。

mouseenter事件和mouseover的区别

  1. 关键点就是：冒泡的方式处理问题

简单的例子：

mouseover为例：

  1. <div class="aaron2">
  2.     <p>鼠标离开此区域触发mouseleave事件</p>
  3. </div>

如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:

  1. p元素响应事件
  2. div元素响应事件

这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发

所以在这种情况下面，jQuery推荐我们使用 mouseenter事件

  1. mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .left div,
  9.     .right div {
  10.         width: 350px;
  11.         height: 150px;
  12.         padding: 5px;
  13.         margin: 5px;
  14.         border: 1px solid #ccc;
  15.     }
  16.     p{
  17.         height: 50px;
  18.         border: 1px solid red;
  19.         margin: 30px;
  20.     }
  21.     .left div {
  22.         background: #bbffaa;
  23.     }
  24.     .right div {
  25.         background: yellow;
  26.     }
  27.     </style>
  28.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  29. </head>
  30.  
  31. <body>
  32.     <h2>.mouseover()方法</h2>
  33.     <div class="left">
  34.         <div class="aaron1">
  35.             <p>鼠标离开此区域触发mouseover事件</p>
  36.             <a>mouseover事件触发次数：</a><br/>
  37.             <a>mouseover冒泡事件触发次数：</a>
  38.         </div>
  39.     </div>
  40.  
  41.     <h2>.mouseenter()方法</h2>
  42.     <div class="right">
  43.         <div class="aaron2">
  44.             <p>鼠标进入此区域触发mouseenter事件</p>
  45.             <a>mouseenter事件触发次数：</a><br/>
  46.             <a>mouseenter冒泡事件触发次数：</a>
  47.         </div>
  48.     </div>
  49.     <br/>
  50.  
  51.     <script type="text/javascript">
  52.  
  53.         var i = 0;
  54.         $(".aaron1 p").mouseover(function(e) {
  55.             $(".aaron1 a:first").html('mouseover事件触发次数：' + (++i))
  56.         })
  57.  
  58.         var n = 0;
  59.         $(".aaron1").mouseover(function() {
  60.             $(".aaron1 a:last").html('mouseover冒泡事件触发次数：' + (++n))
  61.         })
  62.  
  63.     </script>
  64.  
  65.     <script type="text/javascript">
  66.  
  67.         var i = 0;
  68.         $(".aaron2 p").mouseenter(function(e) {
  69.             $(".aaron2 a:first").html('mouseenter事件触发次数：' + (++i))
  70.         })
  71.  
  72.         var n = 0;
  73.         $(".aaron2").mouseenter(function() {
  74.             $(".aaron2 a:last").html('mouseenter冒泡事件触发次数：' + (++n))
  75.         })
  76.  
  77.     </script>
  78. </body>
  79.  
  80. </html>

jQuery鼠标事件之hover事件

在元素上移进移出切换其换色，一般通过2个事件配合就可以达到，这里用mouseenter与mouseleave，这样可以避免冒泡问题

  1. $(ele).mouseenter(function(){
  2.      $(this).css("background", '#bbffaa');
  3.  })
  4. $(ele).mouseleave(function(){
  5.     $(this).css("background", 'red');
  6. })

这样目的是达到了，代码稍微有点多，对于这样的简单逻辑jQuery直接提供了一个hover方法，可以便捷处理

只需要在hover方法中传递2个回调函数就可以了，不需要显示的绑定2个事件

  1. $(selector).hover(handlerIn, handlerOut)
  • handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
  • handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .left div,
  9.     .right div {
  10.         width: 350px;
  11.         height: 150px;
  12.         padding: 5px;
  13.         margin: 5px;
  14.         border: 1px solid #ccc;
  15.     }
  16.  
  17.     p {
  18.         height: 50px;
  19.         border: 1px solid red;
  20.         margin: 30px;
  21.     }
  22.  
  23.     .left div {
  24.         background: #bbffaa;
  25.     }
  26.  
  27.     </style>
  28.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  29. </head>
  30.  
  31. <body>
  32.     <h2>.hover()方法</h2>
  33.     <div class="left">
  34.         <div class="aaron1">
  35.             <p>触发hover事件</p>
  36.         </div>
  37.     </div>
  38.     <script type="text/javascript">
  39.  
  40.     // hover()方法是同时绑定 mouseenter和 mouseleave事件。
  41.     // 我们可以用它来简单地应用在 鼠标在元素上行为
  42.     $("p").hover(
  43.         function() {
  44.             $(this).css("background", 'red');
  45.         },
  46.         function() {
  47.             $(this).css("background", '#bbffaa');
  48.         }
  49.     );
  50.  
  51.     </script>
  52. </body>
  53.  
  54. </html>

jQuery鼠标事件之focusin事件

当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件

使用上非常简单：

方法一：$ele.focusin()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，一般用的比较少

  1. <div id="test">点击触发<div>
  2. $("ele").focusin(function(){
  3.     alert('触发指定事件')
  4. })
  5. $("#test").mouseup(function(){
  6.      $("ele").focusin()  //指定触发事件
  7. });

方法二：$ele.focusin( handler )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

  1. <div id="test">点击触发<div>
  2. $("#test").focusin(function() {
  3.     //this指向 div元素
  4. });

方法三：$ele.focusin( [eventData ], handler )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

  1. <div id="test">点击触发<div>
  2. $("#test").focusin(11111,function(e) {
  3.     //this指向 div元素
  4.     //e.date  => 11111 传递数据
  5. });
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .left div,
  9.     .right div {
  10.         width: 500px;
  11.         height: 50px;
  12.         padding: 5px;
  13.         margin: 5px;
  14.         float: left;
  15.         border: 1px solid #ccc;
  16.     }
  17.     .left div {
  18.         background: #bbffaa;
  19.     }
  20.  
  21.     .right div {
  22.         background: yellow;
  23.     }
  24.     </style>
  25.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  26. </head>
  27.  
  28. <body>
  29.     <h2>.focusin()方法</h2>
  30.     <div class="left">
  31.         <div class="aaron">
  32.             点击聚焦：<input type="text" />
  33.         </div>
  34.     </div>
  35.     <div class="right">
  36.         <div class="aaron1">
  37.             点击聚焦并传递参数：<input type="text" />
  38.         </div>
  39.     </div>
  40.  
  41.     <script type="text/javascript">
  42.  
  43.         //input聚焦
  44.         //给input元素增加一个边框
  45.         $("input:first").focusin(function() {
  46.              $(this).css('border','2px solid red')
  47.         })
  48.  
  49.     </script>
  50.  
  51.     <script type="text/javascript">
  52.  
  53.         //不同函数传递数据
  54.         function fn(e) {
  55.              $(this).val(e.data)
  56.         }
  57.  
  58.         function a() {
  59.             $("input:last").focusin('慕课网', fn)
  60.         }
  61.         a();
  62.  
  63.     </script>
  64. </body>
  65.  
  66. </html>

jQuery鼠标事件之focusout事件

当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件

使用上非常简单：

方法一：$ele.focusout()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，可能一般用的比较少

  1. <div id="test">点击触发<div>
  2. $("ele").focusout(function(){
  3.     alert('触发指定事件')
  4. })
  5. $("#test").mouseup(function(){
  6.      $("ele").focusout()  //指定触发事件
  7. });

方法二：$ele.focusout( handler )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

  1. <div id="test">点击触发<div>
  2. $("#test").focusout(function() {
  3.     //this指向 div元素
  4. });

方法三：$ele.focusout( [eventData ], handler )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

  1. <div id="test">点击触发<div>
  2. $("#test").focusout(11111,function(e) {
  3.     //this指向 div元素
  4.     //e.date  => 11111 传递数据
  5. });
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .left div,
  9.     .right div {
  10.         width: 500px;
  11.         height: 50px;
  12.         padding: 5px;
  13.         margin: 5px;
  14.         float: left;
  15.         border: 1px solid #ccc;
  16.     }
  17.     .left div {
  18.         background: #bbffaa;
  19.     }
  20.  
  21.     .right div {
  22.         background: yellow;
  23.     }
  24.     </style>
  25.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  26. </head>
  27.  
  28. <body>
  29.     <h2>.focusout()方法</h2>
  30.     <div class="left">
  31.         <div class="aaron">
  32.             点击触发失去焦点：<input type="text" />
  33.         </div>
  34.     </div>
  35.     <div class="right">
  36.         <div class="aaron1">
  37.             点击触发失去焦点并传递参数：<input type="text" />
  38.         </div>
  39.     </div>
  40.  
  41.     <script type="text/javascript">
  42.  
  43.         //input失去焦点
  44.         //给input元素增加一个边框
  45.         $("input:first").focusout(function() {
  46.              $(this).css('border','2px solid red')
  47.         })
  48.  
  49.     </script>
  50.  
  51.     <script type="text/javascript">
  52.  
  53.         //不同函数传递数据
  54.         function fn(e) {
  55.              $(this).val(e.data)
  56.         }
  57.  
  58.         function a() {
  59.             $("input:last").focusout('慕课网', fn)
  60.         }
  61.         a();
  62.  
  63.     </script>
  64. </body>
  65.  
  66. </html>

Javascript-- jQuery事件篇(1)的更多相关文章

  1. jQuery事件篇---高级事件

    内容提纲: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one 发文不易,转载请注明出处! 一．模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕 ...

  2. jQuery事件篇---事件对象

    内容提纲: 1.事件对象 2.冒泡和默认行为 发文不易,转载请注明出处! JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器的兼容性,开发者总是会做兼容方 ...

  3. jQuery事件篇---基础事件

    写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...

  4. JavaScript jQuery 事件、动画、扩展

    事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...

  5. JavaScript / JQuery事件委托如何实现？

    一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 事件委托就是利用事件冒泡原理实现的! 事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件: 例:页面 ...

  6. Javascript - Jquery - 事件

    事件(Event) 文档事件 文档的载入事件 ready(fn) $(document).ready(function () { }); //或$(function () {}); //或$(docu ...

  7. jQuery事件篇---过滤选择器 & 表单选择器

    内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...

  8. JavaScript, JQuery事件委托

    1.引言 现实当中,前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.(公司也不会容忍那么多员工站在门口就为了等快递); 这种事件委托还有个好处,就是即便公司又来很多员工 ...

  9. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

  10. javascript事件委托和jquery事件委托

    元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...

随机推荐

  1. (C#)为应用程式设定运行权限(System.Security类下的GenericIdentity,GenericPrincipal,PrincipalPermission)

    最近看书<编写高质量代码改善C#程序的157个建议>,知识点备忘: System.Security.Principal.GenericIdentity==>表示一般用户 System ...

  2. Linux文件查找命令

    1. find find是最常见和最强大的查找命令,你可以用它找到任何你想找的文件. find的使用格式如下: $ find <指定目录> <指定条件> <指定动作> ...

  3. JQuery基础知识--方便忘记时查看

    第一次写博客,不多说废话,实用为先.如有不对,请多指正. JQuery api 第一步引入JQuery库. <script type="text/javascript" sr ...

  4. 安装PyTorch 0.4.0

    https://blog.csdn.net/sunqiande88/article/details/80085569 https://blog.csdn.net/xiangxianghehe/arti ...

  5. poj2115[扩展欧几里德]

    C Looooops Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 22260   Accepted: 6125 Descr ...

  6. api签名认证

    参数列表: data: { sign, uid或是openId, version, timestamp, param } sign 签名一般情况下,根据如下几项生成,通过md5或是aes加密: 接口 ...

  7. 梯度下降算法（gradient descent）

    简述 梯度下降法又被称为最速下降法(Steepest descend method),其理论基础是梯度的概念.梯度与方向导数的关系为:梯度的方向与取得最大方向导数值的方向一致,而梯度的模就是函数在该点 ...

  8. ABAP文件选择框函数

    因为WS_FILENAME_GET已经被废弃所以使用接口CL_GUI_FRONTEND_SERVICES来实现本地文件的选择. 用接口类CL_GUI_FRONTEND_SERVICES实现的方法 CA ...

  9. 从springmvc启动日志学习

    javaee标准中,tomcat等web容器启动时走web.xml 先将各种contex-param 放到servletcontxt中变成parameter,然后开始启动容器,容器对外提供了liste ...

  10. Javaweb基础--->Servlet（转载）

    今天看到这篇博客,感觉还不错,拿来借鉴学习一下. 一.Servlet 是什么? Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客 ...