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

jQuery鼠标事件之mouseenter与mouseleave事件

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

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

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

mouseenter事件和mouseover的区别

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

简单的例子：

mouseover为例：

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

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

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

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

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

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发


这就是最本质的区别，具体的对应可以参考右边的案例：

PS：同学可以根据右侧代码，自己写出mouseout与mouseleave的区别哦~

任务

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: 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="https://www.imooc.com/static/lib/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.  
  52.     <script type="text/javascript">
  53.  
  54.         var i = 0;
  55.         $(".aaron1 p").mouseover(function(e) {
  56.             $(".aaron1 a:first").html('mouseover事件触发次数：' + (++i))
  57.         })
  58.  
  59.         var n = 0;
  60.         $(".aaron1").mouseover(function() {
  61.             $(".aaron1 a:last").html('mouseover冒泡事件触发次数：' + (++n))
  62.         })
  63.  
  64.  
  65.     </script>
  66.  
  67.  
  68.     <script type="text/javascript">
  69.  
  70.         var i = 0;
  71.         $(".aaron2 p").mouseenter(function(e) {
  72.             $(".aaron2 a:first").html('mouseenter事件触发次数：' + (++i))
  73.         })
  74.  
  75.         var n = 0;
  76.         $(".aaron2").mouseenter(function() {
  77.             $(".aaron2 a:last").html('mouseenter冒泡事件触发次数：' + (++n))
  78.         })
  79.  
  80.     </script>
  81.  
  82.  
  83. </body>
  84.  
  85. </html>
  86.  
下一节