Jquery-鼠标事件

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
(1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。
        $('p').click(function(){
                alert('click function is running !');
              });

(2):dbclick事件：dbclick事件在用户完成迅速连续的两次点击之后触发，双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用。
        $('p').dbclick(function(){
                alert('dbclick function is running !');
              });
(3):mousedown事件：mousedown事件在用户敲击鼠标键时触发，跟keydown事件不一样，该事件仅在按下鼠标时触发。
        $('p').mousedown(function(){
                alert('mousedown function is running !');
              });
(4):mouseup事件：mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发。
        $('p').mouseup(function(){
                alert('mouseup function is running !');
              }).click(function(){
                 alert('click function is running too !');
                 });
(5):mouseover事件：mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性。
(6):mouseout事件：mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。
      (5)和(6)这两个事件一般不常用，很难实现与用户的交互，也就是说不易捕获用户事件。
(7):mouseenter事件：mouseenter事件是在用户光标进入元素上时触发。
         $('p').mouseenter(function(){
                alert('mouseenter function is running !');
              });

(8):mouseleaver事件：mouseleaver事件是在用户的光标离开元素时触发。
           $('p').mouseleaver(function(){
                alert('mouseleaver function is running !');
             });
      (7)和(8)这两个事件一般连起来使用，在jQuery中可以使用hover这个函数来代替这两个函数。
       $('p').hover(function(){
                       alert('mouseenter function is running !');
                      },function(){
                              alert('mouseleaver function is running !');
                         });

mousedown:鼠标按下才发生

mouseup:鼠标按下松开时才发生

mouseenter和mouseleave效果和mouseover mouseout效果差不多；但存在区别，区别见代码解析：

css代码：

 1 <style>
 2             .cc,.dd{
 3                 height: 80px;
 4                 width: 300px;
 5                 border: 1px solid black;
 6             }
 7             .ff,.ee{
 8                 height: 200px;
 9                 width: 300px;
10                 background-color: darkgrey;
11                 border:1px solid red;
12                 text-align: center;    
13             }
14         </style>

html代码：

 1 <body>
 2          
 3         <div class="aa">1、please press down your mouse button</div><br />
 4         <div class="bb">2、please press up your mouse button</div><br />
 5          
 6         <div class="cc">
 7          
 8             3、mouseenter：颜色变红
 9             mouseleave：颜色变灰
10          
11         </div><br />
12          
13         <div class="dd">
14             4、mouseover：颜色变黄
15             mouseout：颜色变灰
16         </div><br />
17          
18         <div class="ff"> 5、<p style="">mouseout事件在鼠标离开任意一个子元素及选的元素时触发</p><span></span> </div><br />
19         <div class="ee"> 6、<p style="">mouseleave事件只在鼠标离开选取的的元素时触发。</p><span></span>  </div>   
20     </body>

jqery代码：

 1 <script>
 2 //当鼠标按下时会显示
 3         $(".aa").mousedown(function(){
 4             $(this).after("<p>when mouse button press down</p>")
 5         });
 6 //当鼠标按下松开时发生的        
 7         $(".bb").mouseup(function(){
 8             $(this).after("<p>when mouse button press up</p>")
 9         });
10 //当鼠标enter/leave
11         $(".cc").mouseenter(function(){
12             $(".cc").css("background-color","red")          
13         });
14          $(".cc").mouseleave(function(){
15             $(".cc").css("background-color","grey")          
16         });    
17  //当鼠标mouseover/mouseout
18        $(".dd").mouseover(function(){
19            $(".dd").css("background-color","yellow")
20        });
21        $(".dd").mouseout(function(){
22            $(".dd").css("background-color","grey")
23        });
24  //mouseleave 与 mouseout 的区别   
25  x=0;
26  y=0;
27  $(".ff").mouseout(function(){
28      $(".ff span").text(x+=1);
29  })
30  $(".ee").mouseleave(function(){
31      $(".ee span").text(y+=1);
32  })
33  //mouseenter,mouseover同理
34  //mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。
35 //mouseenter 事件只在鼠标移动到选取的元素上时触发。
36 </script>