2-8 jQuery鼠标事件之focusin事件
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery鼠标事件之focusin事件

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

使用上非常简单：

方法一：$ele.focusin()

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

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

 

方法二：$ele.focusin( handler )

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

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

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

 

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

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

<div id="test">点击触发<div>
$("#test").focusin(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 传递数据
});

 

事件非常简单，具体的操作参考右边的代码区域

 

任务

index.html 
  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="https://www.imooc.com/static/lib/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.  
  42.     <script type="text/javascript">
  43.  
  44.         //input聚焦
  45.         //给input元素增加一个边框
  46.         $("input:first").focusin(function() {
  47.              $(this).css('border','2px solid red')
  48.         })
  49.  
  50.     </script>
  51.  
  52.  
  53.     <script type="text/javascript">
  54.  
  55.         //不同函数传递数据
  56.         function fn(e) {
  57.              $(this).val(e.data)
  58.         }
  59.  
  60.         function a() {
  61.             $("input:last").focusin('慕课网', fn)
  62.         }
  63.         a();
  64.  
  65.     </script>
  66. </body>
  67.  
  68. </html>
  69.  
下一节