标签：css lis class 切换 控制台 重复 run 版本 键盘
这里直接把《Javascript 高级程序设计（第三版）》中的解释贴出来：
由于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
标签：css lis class 切换 控制台 重复 run 版本 键盘
原文地址：http://www.cnblogs.com/fogwind/p/6361494.html
