mouseover/mouseout

:::info 鼠标滑入滑出事件
一般在DOM结构比较简单的时候使用 :::

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       .box {
  10.         width: 200px;
  11.         height: 200px;
  12.         background-color: orange;
  13.       }
  14.       .box1 {
  15.         width: 100px;
  16.         height: 100px;
  17.         background-color: black;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div class="box">
  23.       <div class="box1"></div>
  24.     </div>
  25.   </body>
  26. </html>
  27. <script>
  28.   // ...
  29. </script>

这两个事件还存在事件冒泡：

  1. var oBox = document.getElementsByClassName("box")[0];
  2. var oBox1 = document.getElementsByClassName("box1")[0];
  4. oBox.onmouseover = function () {
  5.   this.style.backgroundColor = "green";
  6. };
  7. oBox.onmouseout = function () {
  8.   this.style.backgroundColor = "orange";
  9. };
  10. oBox1.onmouseover = function (event) {
  11.   this.style.backgroundColor = "white";
  12. };
  13. oBox1.onmouseout = function () {
  14.   this.style.backgroundColor = "black";
  15. };

image.pngimage.png
这样很明显的看到，当我们把鼠标滑入进box1后，box的样式也被更改了！

另外该事件对元素本身和元素内部的子元素都会生效（有点像事件捕获的机制），

或者说当在元素的子元素上滑入滑出时也会触发父元素的滑入滑出事件！！！

  1. var oBox = document.getElementsByClassName("box")[0];
  2. var oBox1 = document.getElementsByClassName("box1")[0];
  3. var overCount = 0,
  4.     outCount = 0;
  6. oBox.onmouseover = function () {
  7.   overCount++;
  8.   console.log("onmouseover", overCount);
  9. };
  10. oBox.onmouseout = function () {
  11.   outCount++;
  12.   console.log("onmouseout", outCount);
  13. };

image.pngimage.pngimage.png
可以看到当我们在元素内部滑入滑出姿元素的时候，box的事件也会被触发！

mouseenter/mouseleave

:::info 鼠标滑入滑出事件
一般在DOM结构复杂的时候使用 ::: 该事件不存在「冒泡行为」。
但是有些情况下会被误以为是冒泡行为。

  1. var oBox = document.getElementsByClassName("box")[0];
  2. var oBox1 = document.getElementsByClassName("box1")[0];
  4. oBox.onmouseenter = function () {
  5.   this.style.backgroundColor = "green";
  6. };
  7. oBox.onmouseleave = function () {
  8.   this.style.backgroundColor = "orange";
  9. };
  10. oBox1.onmouseenter = function (event) {
  11.   this.style.backgroundColor = "white";
  12. };
  13. oBox1.onmouseleave = function () {
  14.   this.style.backgroundColor = "black";
  15. };

image.pngimage.png
这样乍一看和mouseover/mouseout的行为是一样的，但是当我们进行阻止冒泡操作的时候是无效的！！！

  1. var oBox = document.getElementsByClassName("box")[0];
  2. var oBox1 = document.getElementsByClassName("box1")[0];
  4. oBox.onmouseenter = function () {
  5.   this.style.backgroundColor = "green";
  6. };
  7. oBox.onmouseleave = function () {
  8.   this.style.backgroundColor = "orange";
  9. };
  10. oBox1.onmouseenter = function (event) {
  11.   var event = event || window.event;
  12.   event.stopPropagation(); // 取消冒泡行为，但是无效！！！
  13.   this.style.backgroundColor = "white";
  14. };
  15. oBox1.onmouseleave = function () {
  16.   this.style.backgroundColor = "black";
  17. };

这是因为mouseenter/mouserleave只会对自己绑定的元素负责（因为box1是box的子元素，还是相当于在box上滑入滑出）。

  1. var oBox = document.getElementsByClassName("box")[0];
  2. var oBox1 = document.getElementsByClassName("box1")[0];
  3. var enterCount = 0,
  4.     leaveCount = 0;
  6. oBox.onmouseenter = function () {
  7.     overCount++;
  8.     console.log("onmouseenter", overCount);
  9.   };
  10.   oBox.onmouseleave = function () {
  11.     outCount++;
  12.     console.log("onmouseleave", outCount);
  13.   };

image.pngimage.pngimage.png
当我们在box1滑入滑出的时候，不会触发box的滑入滑出事件去触发count增加！！！