mouseover、mouseout和mouseenter、mouseleave

这里直接把《Javascript 高级程序设计（第三版）》中的解释贴出来：

mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。
mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上时不会触发。
mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上时不会触发。

由于mouseover和mouseout事件会冒泡，所以如果为一个元素添加了这两个事件，那么在该元素的后代元素上切换时会重复触发该元素的这两个事件（在项目中要注意）。如果在后代元素上阻止事件冒泡，那么鼠标指针移到后代元素上，相当于触发了该元素（祖先元素）的mouseout事件。

而mouseenter和mouseleave没有此行为。

注意：IE8及以下版本不支持DOM2级添加事件的方法。

例子：点我看在线演示（在控制台中查看）

<style type="text/css">

   html,body{

      height:100%;

   }

   body{

      padding:100px;

   }

   div{

      margin:auto;

   }

   #div1,#div4{

      width:400px;

      height:300px;

      background-color: red;

   }

   #div4{

      margin-top: 50px;

      background-color: #2a3e5d;

   }

   #div2,#div5{

      width:300px;

      height:250px;

      background-color: black;

   }

   #div3,#div6{

      width:200px;

      height:150px;

      background-color: gold;

   }

</style>

<div id="div1">

   <div id="div2">

      <div id="div3"></div>

   </div>

   div1

</div>

<div id="div4">

   <div id="div5">

      <div id="div6"></div>

   </div>

   div4

</div>

<script type="text/javascript" >

(function(){

   function get(id){

      return document.getElementById(id);

   }

   var div1 = get('div1'), div2 = get('div2'), div3 = get('div3');

   div1.count = 0;

   div1.addEventListener('mouseenter', function() {

      this.style.backgroundColor = "pink";

      div1.count++;

      console.log('div1.count: '+div1.count);

   }, false);

   div1.addEventListener('mouseleave', function() {

      this.style.backgroundColor = "green";

      div1.count--;

      console.log('div1.count: '+div1.count);

   }, false);

   var div4 = get('div4'), div5 = get('div5'), div6 = get('div6');

   div4.count = 0;

   div4.addEventListener('mouseover', function() {

      this.style.backgroundColor = "blue";

      div4.count++;

      console.log('div4.count: '+div4.count);

   }, false);

   div4.addEventListener('mouseout', function() {

      this.style.backgroundColor = "gray";

      div4.count--;

      console.log('div4.count: '+div4.count);

   }, false);

})();

</script>

巴特西

mouseover、mouseout和mouseenter、mouseleave

最新文章

热门文章