我们将深入研究鼠标在元素之间移动时发生的事件。

事件 mouseover/mouseout，relatedTarget

当鼠标指针移到某个元素上时，mouseover 事件就会发生，而当鼠标离开该元素时，mouseout 事件就会发生。
image.png
这些事件很特别，因为它们具有 relatedTarget 属性。此属性是对 target 的补充。当鼠标从一个元素离开并去往另一个元素时，其中一个元素就变成了 target，另一个就变成了 relatedTarget。
对于 mouseover：

  • event.target —— 是鼠标移过的那个元素。
  • event.relatedTarget —— 是鼠标来自的那个元素（relatedTarget → target）。

mouseout 则与之相反：

  • event.target —— 是鼠标离开的元素。
  • event.relatedTarget —— 是鼠标移动到的，当前指针位置下的元素（target → relatedTarget）。

在下面这个示例中，每张脸及其功能都是单独的元素。当你移动鼠标时，你可以在文本区域中看到鼠标事件。
每个事件都具有关于 target 和 relatedTarget 的信息：

  1. <!DOCTYPE HTML>
  2. <html>
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <link rel="stylesheet" href="style.css">
  7.   </head>
  9.   <body>
  11.     <div id="container">
  12.       <div class="smiley-green">
  13.         <div class="left-eye"></div>
  14.         <div class="right-eye"></div>
  15.         <div class="smile"></div>
  16.       </div>
  18.       <div class="smiley-yellow">
  19.         <div class="left-eye"></div>
  20.         <div class="right-eye"></div>
  21.         <div class="smile"></div>
  22.       </div>
  24.       <div class="smiley-red">
  25.         <div class="left-eye"></div>
  26.         <div class="right-eye"></div>
  27.         <div class="smile"></div>
  28.       </div>
  29.     </div>
  31.     <textarea id="log">Events will show up here!
  32.     </textarea>
  34.     <script src="script.js"></script>
  36.   </body>
  37. </html>
  1. body,
  2. html {
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. #container {
  8.   border: 1px solid brown;
  9.   padding: 10px;
  10.   width: 330px;
  11.   margin-bottom: 5px;
  12.   box-sizing: border-box;
  13. }
  15. #log {
  16.   height: 120px;
  17.   width: 350px;
  18.   display: block;
  19.   box-sizing: border-box;
  20. }
  22. [class^="smiley-"] {
  23.   display: inline-block;
  24.   width: 70px;
  25.   height: 70px;
  26.   border-radius: 50%;
  27.   margin-right: 20px;
  28. }
  30. .smiley-green {
  31.   background: #a9db7a;
  32.   border: 5px solid #92c563;
  33.   position: relative;
  34. }
  36. .smiley-green .left-eye {
  37.   width: 18%;
  38.   height: 18%;
  39.   background: #84b458;
  40.   position: relative;
  41.   top: 29%;
  42.   left: 22%;
  43.   border-radius: 50%;
  44.   float: left;
  45. }
  47. .smiley-green .right-eye {
  48.   width: 18%;
  49.   height: 18%;
  50.   border-radius: 50%;
  51.   position: relative;
  52.   background: #84b458;
  53.   top: 29%;
  54.   right: 22%;
  55.   float: right;
  56. }
  58. .smiley-green .smile {
  59.   position: absolute;
  60.   top: 67%;
  61.   left: 16.5%;
  62.   width: 70%;
  63.   height: 20%;
  64.   overflow: hidden;
  65. }
  67. .smiley-green .smile:after,
  68. .smiley-green .smile:before {
  69.   content: "";
  70.   position: absolute;
  71.   top: -50%;
  72.   left: 0%;
  73.   border-radius: 50%;
  74.   background: #84b458;
  75.   height: 100%;
  76.   width: 97%;
  77. }
  79. .smiley-green .smile:after {
  80.   background: #84b458;
  81.   height: 80%;
  82.   top: -40%;
  83.   left: 0%;
  84. }
  86. .smiley-yellow {
  87.   background: #eed16a;
  88.   border: 5px solid #dbae51;
  89.   position: relative;
  90. }
  92. .smiley-yellow .left-eye {
  93.   width: 18%;
  94.   height: 18%;
  95.   background: #dba652;
  96.   position: relative;
  97.   top: 29%;
  98.   left: 22%;
  99.   border-radius: 50%;
  100.   float: left;
  101. }
  103. .smiley-yellow .right-eye {
  104.   width: 18%;
  105.   height: 18%;
  106.   border-radius: 50%;
  107.   position: relative;
  108.   background: #dba652;
  109.   top: 29%;
  110.   right: 22%;
  111.   float: right;
  112. }
  114. .smiley-yellow .smile {
  115.   position: absolute;
  116.   top: 67%;
  117.   left: 19%;
  118.   width: 65%;
  119.   height: 14%;
  120.   background: #dba652;
  121.   overflow: hidden;
  122.   border-radius: 8px;
  123. }
  125. .smiley-red {
  126.   background: #ee9295;
  127.   border: 5px solid #e27378;
  128.   position: relative;
  129. }
  131. .smiley-red .left-eye {
  132.   width: 18%;
  133.   height: 18%;
  134.   background: #d96065;
  135.   position: relative;
  136.   top: 29%;
  137.   left: 22%;
  138.   border-radius: 50%;
  139.   float: left;
  140. }
  142. .smiley-red .right-eye {
  143.   width: 18%;
  144.   height: 18%;
  145.   border-radius: 50%;
  146.   position: relative;
  147.   background: #d96065;
  148.   top: 29%;
  149.   right: 22%;
  150.   float: right;
  151. }
  153. .smiley-red .smile {
  154.   position: absolute;
  155.   top: 57%;
  156.   left: 16.5%;
  157.   width: 70%;
  158.   height: 20%;
  159.   overflow: hidden;
  160. }
  162. .smiley-red .smile:after,
  163. .smiley-red .smile:before {
  164.   content: "";
  165.   position: absolute;
  166.   top: 50%;
  167.   left: 0%;
  168.   border-radius: 50%;
  169.   background: #d96065;
  170.   height: 100%;
  171.   width: 97%;
  172. }
  174. .smiley-red .smile:after {
  175.   background: #d96065;
  176.   height: 80%;
  177.   top: 60%;
  178.   left: 0%;
  179. }
  1. container.onmouseover = container.onmouseout = handler;
  3. function handler(event) {
  5.   function str(el) {
  6.     if (!el) return "null"
  7.     return el.className || el.tagName;
  8.   }
  10.   log.value += event.type + ':  ' +
  11.     'target=' + str(event.target) +
  12.     ',  relatedTarget=' + str(event.relatedTarget) + "\n";
  13.   log.scrollTop = log.scrollHeight;
  15.   if (event.type == 'mouseover') {
  16.     event.target.style.background = 'pink'
  17.   }
  18.   if (event.type == 'mouseout') {
  19.     event.target.style.background = ''
  20.   }
  21. }

image.png
relatedTarget 可以为 null
relatedTarget 属性可以为 null。
这是正常现象，仅仅是意味着鼠标不是来自另一个元素，而是来自窗口之外。或者它离开了窗口。
当我们在代码中使用 event.relatedTarget 时，我们应该牢记这种可能性。如果我们访问 event.relatedTarget.tagName，那么就会出现错误。

跳过元素

当鼠标移动时，就会触发 mousemove 事件。但这并不意味着每个像素都会导致一个事件。
浏览器会一直检查鼠标的位置。如果发现了变化，就会触发事件。
这意味着，如果访问者非常快地移动鼠标，那么某些 DOM 元素就可能被跳过：
image.png
如果鼠标从上图所示的 #FROM 快速移动到 #TO 元素，则中间的

（或其中的一些）元素可能会被跳过。mouseout 事件可能会在 #FROM 上被触发，然后立即在 #TO 上触发 mouseover。
这对性能很有好处，因为可能有很多中间元素。我们并不真的想要处理每一个移入和离开的过程。
另一方面，我们应该记住，鼠标指针并不会“访问”所有元素。它可以“跳过”一些元素。
特别是，鼠标指针可能会从窗口外跳到页面的中间。在这种情况下，relatedTarget 为 null，因为它是从石头缝里蹦出来的（nowhere）：
image.png
你可以在下面的测试台中“实时”查看。
它的 HTML 有两个嵌套的元素：
在
内部。如果将鼠标快速移动到它们上，则可能只有
或者只有
触发事件，或者根本没有事件触发。
还可以将鼠标指针移动到
中，然后将其快速向下移动过其父级元素。如果移动速度足够快，则父元素就会被忽略。鼠标会越过父元素而不会引起其注意。

  1. <!doctype html>
  2. <html>
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <link rel="stylesheet" href="style.css">
  7.   </head>
  9.   <body>
  11.     <div id="parent">parent
  12.       <div id="child">child</div>
  13.     </div>
  14.     <textarea id="text"></textarea>
  15.     <input onclick="clearText()" value="Clear" type="button">
  17.     <script src="script.js"></script>
  19.   </body>
  21. </html>
  1. #parent {
  2.   background: #99C0C3;
  3.   width: 160px;
  4.   height: 120px;
  5.   position: relative;
  6. }
  8. #child {
  9.   background: #FFDE99;
  10.   width: 50%;
  11.   height: 50%;
  12.   position: absolute;
  13.   left: 50%;
  14.   top: 50%;
  15.   transform: translate(-50%, -50%);
  16. }
  18. textarea {
  19.   height: 140px;
  20.   width: 300px;
  21.   display: block;
  22. }
  1. let parent = document.getElementById('parent');
  2. parent.onmouseover = parent.onmouseout = parent.onmousemove = handler;
  4. function handler(event) {
  5.   let type = event.type;
  6.   while (type.length < 11) type += ' ';
  8.   log(type + " target=" + event.target.id)
  9.   return false;
  10. }
  13. function clearText() {
  14.   text.value = "";
  15.   lastMessage = "";
  16. }
  18. let lastMessageTime = 0;
  19. let lastMessage = "";
  20. let repeatCounter = 1;
  22. function log(message) {
  23.   if (lastMessageTime == 0) lastMessageTime = new Date();
  25.   let time = new Date();
  27.   if (time - lastMessageTime > 500) {
  28.     message = '------------------------------\n' + message;
  29.   }
  31.   if (message === lastMessage) {
  32.     repeatCounter++;
  33.     if (repeatCounter == 2) {
  34.       text.value = text.value.trim() + ' x 2\n';
  35.     } else {
  36.       text.value = text.value.slice(0, text.value.lastIndexOf('x') + 1) + repeatCounter + "\n";
  37.     }
  39.   } else {
  40.     repeatCounter = 1;
  41.     text.value += message + "\n";
  42.   }
  44.   text.scrollTop = text.scrollHeight;
  46.   lastMessageTime = time;
  47.   lastMessage = message;
  48. }

image.png
如果 mouseover 被触发了，则必须有 mouseout
在鼠标快速移动的情况下，中间元素可能会被忽略，但是我们可以肯定一件事：如果鼠标指针“正式地”进入了一个元素（生成了 mouseover 事件），那么一旦它离开，我们就会得到 mouseout。

当移动到一个子元素时 mouseout

mouseout 的一个重要功能 —— 当鼠标指针从元素移动到其后代时触发，例如在下面的这个 HTML 中，从 #parent 到 #child：

  1. <div id="parent">
  2.   <div id="child">...</div>
  3. </div>

如果我们在 #parent 上，然后将鼠标指针更深入地移入 #child，在 #parent 上我们会得到 mouseout！
image.png
这听起来很奇怪，但很容易解释。
根据浏览器的逻辑，鼠标指针随时可能位于单个元素上 —— 嵌套最多的那个元素（z-index 最大的那个）。
因此，如果它转到另一个元素（甚至是一个后代），那么它将离开前一个元素。
请注意事件处理的另一个重要的细节。
后代的 mouseover 事件会冒泡。因此，如果 #parent 具有 mouseover 处理程序，它将被触发
image.png

你可以在下面这个示例中很清晰地看到这一点：

位于
内部。#parent 元素上有 mouseover/out 的处理程序，这些处理程序用于输出事件详细信息。
如果你将鼠标从 #parent 移动到 #child，那么你会看到在 #parent 上有两个事件:

  1. mouseout [target: parent]（离开 parent），然后

  2. mouseover [target: child]（来到 child，冒泡）。 ```html <!doctype html>

    parent
    child

  1. ```css
  2. #parent {
  3.   background: #99C0C3;
  4.   width: 160px;
  5.   height: 120px;
  6.   position: relative;
  7. }
  9. #child {
  10.   background: #FFDE99;
  11.   width: 50%;
  12.   height: 50%;
  13.   position: absolute;
  14.   left: 50%;
  15.   top: 50%;
  16.   transform: translate(-50%, -50%);
  17. }
  19. textarea {
  20.   height: 140px;
  21.   width: 300px;
  22.   display: block;
  23. }
  1. function mouselog(event) {
  2.   let d = new Date();
  3.   text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2');
  4.   text.scrollTop = text.scrollHeight;
  5. }

image.png
如上例所示，当鼠标指针从 #parent 元素移动到 #child 时，会在父元素上触发两个处理程序：mouseout 和 mouseover：

  1. parent.onmouseout = function(event) {
  2.   /* event.target: parent element */
  3. };
  4. parent.onmouseover = function(event) {
  5.   /* event.target: child element (bubbled) */
  6. };

如果我们不检查处理程序中的 event.target，那么似乎鼠标指针离开了 #parent 元素，然后立即回到了它上面。
但是事实并非如此！鼠标指针仍然位于父元素上，它只是更深入地移入了子元素。
如果离开父元素时有一些行为（action），例如一个动画在 parent.onmouseout 中运行，当鼠标指针深入 #parent 时，我们并不希望发生这种行为。
为了避免它，我们可以在处理程序中检查 relatedTarget，如果鼠标指针仍在元素内，则忽略此类事件。
另外，我们可以使用其他事件：mouseenter 和 mouseleave，它们没有此类问题，接下来我们就对其进行详细介绍。

事件 mouseenter 和 mouseleave

事件 mouseenter/mouseleave 类似于 mouseover/mouseout。它们在鼠标指针进入/离开元素时触发。
但是有两个重要的区别：

  1. 元素内部与后代之间的转换不会产生影响。
  2. 事件 mouseenter/mouseleave 不会冒泡。

这些事件非常简单。
当鼠标指针进入一个元素时 —— 会触发 mouseenter。而鼠标指针在元素或其后代中的确切位置无关紧要。
当鼠标指针离开该元素时，事件 mouseleave 才会触发。
这个例子和上面的例子相似，但是现在最顶部的元素有 mouseenter/mouseleave 而不是 mouseover/mouseout。
正如你所看到的，唯一生成的事件是与将鼠标指针移入或移出顶部元素有关的事件。当鼠标指针进入 child 并返回时，什么也没发生。在后代之间的移动会被忽略。

  1. <!doctype html>
  2. <html>
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <link rel="stylesheet" href="style.css">
  7. </head>
  9. <body>
  11.   <div id="parent" onmouseenter="mouselog(event)" onmouseleave="mouselog(event)">parent
  12.     <div id="child">child</div>
  13.   </div>
  15.   <textarea id="text"></textarea>
  16.   <input type="button" onclick="text.value=''" value="Clear">
  18.   <script src="script.js"></script>
  20. </body>
  22. </html>
  1. #parent {
  2.   background: #99C0C3;
  3.   width: 160px;
  4.   height: 120px;
  5.   position: relative;
  6. }
  8. #child {
  9.   background: #FFDE99;
  10.   width: 50%;
  11.   height: 50%;
  12.   position: absolute;
  13.   left: 50%;
  14.   top: 50%;
  15.   transform: translate(-50%, -50%);
  16. }
  18. textarea {
  19.   height: 140px;
  20.   width: 300px;
  21.   display: block;
  22. }
  1. function mouselog(event) {
  2.   let d = new Date();
  3.   text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2');
  4.   text.scrollTop = text.scrollHeight;
  5. }

image.png

事件委托

事件 mouseenter/leave 非常简单且易用。但它们不会冒泡。因此，我们不能使用它们来进行事件委托。
假设我们要处理表格的单元格的鼠标进入/离开。并且这里有数百个单元格。
通常的解决方案是 —— 在

中设置处理程序，并在那里处理事件。但 mouseenter/leave 不会冒泡。因此，如果类似的事件发生在
上，那么只有 上的处理程序才能捕获到它。
上的 mouseenter/leave 的处理程序仅在鼠标指针进入/离开整个表格时才会触发。无法获取有关其内部移动的任何信息。
因此，让我们使用 mouseover/mouseout。
让我们从高亮显示鼠标指针下的元素的简单处理程序开始：

  1. // 高亮显示鼠标指针下的元素
  2. table.onmouseover = function(event) {
  3.   let target = event.target;
  4.   target.style.background = 'pink';
  5. };
  7. table.onmouseout = function(event) {
  8.   let target = event.target;
  9.   target.style.background = '';
  10. };

现在它们已经激活了。当鼠标在下面这个表格的各个元素上移动时，当前位于鼠标指针下的元素会被高亮显示：

  1. <!DOCTYPE HTML>
  2. <html>
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <link rel="stylesheet" href="style.css">
  7.   </head>
  9.   <body>
  12.     <table id="table">
  13.       <tr>
  14.         <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
  15.       </tr>
  16.       <tr>
  17.         <td class="nw"><strong>Northwest</strong>
  18.           <br>Metal
  19.           <br>Silver
  20.           <br>Elders
  21.         </td>
  22.         <td class="n"><strong>North</strong>
  23.           <br>Water
  24.           <br>Blue
  25.           <br>Change
  26.         </td>
  27.         <td class="ne"><strong>Northeast</strong>
  28.           <br>Earth
  29.           <br>Yellow
  30.           <br>Direction
  31.         </td>
  32.       </tr>
  33.       <tr>
  34.         <td class="w"><strong>West</strong>
  35.           <br>Metal
  36.           <br>Gold
  37.           <br>Youth
  38.         </td>
  39.         <td class="c"><strong>Center</strong>
  40.           <br>All
  41.           <br>Purple
  42.           <br>Harmony
  43.         </td>
  44.         <td class="e"><strong>East</strong>
  45.           <br>Wood
  46.           <br>Blue
  47.           <br>Future
  48.         </td>
  49.       </tr>
  50.       <tr>
  51.         <td class="sw"><strong>Southwest</strong>
  52.           <br>Earth
  53.           <br>Brown
  54.           <br>Tranquility
  55.         </td>
  56.         <td class="s"><strong>South</strong>
  57.           <br>Fire
  58.           <br>Orange
  59.           <br>Fame
  60.         </td>
  61.         <td class="se"><strong>Southeast</strong>
  62.           <br>Wood
  63.           <br>Green
  64.           <br>Romance
  65.         </td>
  66.       </tr>
  68.     </table>
  70.     <textarea id="text"></textarea>
  72.     <input type="button" onclick="text.value=''" value="Clear">
  74.     <script src="script.js"></script>
  76.   </body>
  77. </html>
  1. #text {
  2.   display: block;
  3.   height: 100px;
  4.   width: 456px;
  5. }
  7. #table th {
  8.   text-align: center;
  9.   font-weight: bold;
  10. }
  12. #table td {
  13.   width: 150px;
  14.   white-space: nowrap;
  15.   text-align: center;
  16.   vertical-align: bottom;
  17.   padding-top: 5px;
  18.   padding-bottom: 12px;
  19.   cursor: pointer;
  20. }
  22. #table .nw {
  23.   background: #999;
  24. }
  26. #table .n {
  27.   background: #03f;
  28.   color: #fff;
  29. }
  31. #table .ne {
  32.   background: #ff6;
  33. }
  35. #table .w {
  36.   background: #ff0;
  37. }
  39. #table .c {
  40.   background: #60c;
  41.   color: #fff;
  42. }
  44. #table .e {
  45.   background: #09f;
  46.   color: #fff;
  47. }
  49. #table .sw {
  50.   background: #963;
  51.   color: #fff;
  52. }
  54. #table .s {
  55.   background: #f60;
  56.   color: #fff;
  57. }
  59. #table .se {
  60.   background: #0c3;
  61.   color: #fff;
  62. }
  64. #table .highlight {
  65.   background: red;
  66. }
  1. table.onmouseover = function(event) {
  2.   let target = event.target;
  3.   target.style.background = 'pink';
  5.   text.value += `over -> ${target.tagName}\n`;
  6.   text.scrollTop = text.scrollHeight;
  7. };
  9. table.onmouseout = function(event) {
  10.   let target = event.target;
  11.   target.style.background = '';
  13.   text.value += `out <- ${target.tagName}\n`;
  14.   text.scrollTop = text.scrollHeight;
  15. };

image.png
在我们的例子中，我们想要处理表格的单元格

之间的移动：进入一个单元格并离开它。我们对其他移动并不感兴趣，例如在单元格内部或在所有单元格的外部。让我们把这些过滤掉。
我们可以这样做：

  • 在变量中记住当前被高亮显示的
，让我们称它为 currentElem。
  • mouseover —— 如果我们仍然在当前的
    		• 中，则忽略该事件。
  • mouseout —— 如果没有离开当前的
    		• ，则忽略。

    这是说明所有可能情况的代码示例：

    1. // 现在位于鼠标下方的 <td>（如果有）
    2. let currentElem = null;
    4. table.onmouseover = function(event) {
    5.   // 在进入一个新的元素前，鼠标总是会先离开前一个元素
    6.   // 如果设置了 currentElem，那么我们就没有鼠标所悬停在的前一个 <td>，
    7.   // 忽略此事件
    8.   if (currentElem) return;
    10.   let target = event.target.closest('td');
    12.   // 我们移动到的不是一个 <td> —— 忽略
    13.   if (!target) return;
    15.   // 现在移动到了 <td> 上，但在处于了我们表格的外部（可能因为是嵌套的表格）
    16.   // 忽略
    17.   if (!table.contains(target)) return;
    19.   // 给力！我们进入了一个新的 <td>
    20.   currentElem = target;
    21.   onEnter(currentElem);
    22. };
    25. table.onmouseout = function(event) {
    26.   // 如果我们现在处于所有 <td> 的外部，则忽略此事件
    27.   // 这可能是一个表格内的移动，但是在 <td> 外，
    28.   // 例如从一个 <tr> 到另一个 <tr>
    29.   if (!currentElem) return;
    31.   // 我们将要离开这个元素 —— 去哪儿？可能是去一个后代？
    32.   let relatedTarget = event.relatedTarget;
    34.   while (relatedTarget) {
    35.     // 到父链上并检查 —— 我们是否还在 currentElem 内
    36.     // 然后发现，这只是一个内部移动 —— 忽略它
    37.     if (relatedTarget == currentElem) return;
    39.     relatedTarget = relatedTarget.parentNode;
    40.   }
    42.   // 我们离开了 <td>。真的。
    43.   onLeave(currentElem);
    44.   currentElem = null;
    45. };
    47. // 任何处理进入/离开一个元素的函数
    48. function onEnter(elem) {
    49.   elem.style.background = 'pink';
    51.   // 在文本区域显示它
    52.   text.value += `over -> ${currentElem.tagName}.${currentElem.className}\n`;
    53.   text.scrollTop = 1e6;
    54. }
    56. function onLeave(elem) {
    57.   elem.style.background = '';
    59.   // 在文本区域显示它
    60.   text.value += `out <- ${elem.tagName}.${elem.className}\n`;
    61.   text.scrollTop = 1e6;
    62. }

    再次，重要的功能是：

    1. 它使用事件委托来处理表格中任何
    		的进入/离开。因此，它依赖于 mouseover/out 而不是 mouseenter/leave，mouseenter/leave 不会冒泡，因此也不允许事件委托。
  • 额外的事件，例如在
    		• 的后代之间移动都会被过滤掉，因此 onEnter/Leave 仅在鼠标指针进入/离开 整体时才会运行。

    这是带有所有详细信息的完整示例：

    1. <!DOCTYPE HTML>
    2. <html>
    4.   <head>
    5.     <meta charset="utf-8">
    6.     <link rel="stylesheet" href="style.css">
    7.   </head>
    9.   <body>
    12.     <table id="table">
    13.       <tr>
    14.         <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
    15.       </tr>
    16.       <tr>
    17.         <td class="nw"><strong>Northwest</strong>
    18.           <br>Metal
    19.           <br>Silver
    20.           <br>Elders
    21.         </td>
    22.         <td class="n"><strong>North</strong>
    23.           <br>Water
    24.           <br>Blue
    25.           <br>Change
    26.         </td>
    27.         <td class="ne"><strong>Northeast</strong>
    28.           <br>Earth
    29.           <br>Yellow
    30.           <br>Direction
    31.         </td>
    32.       </tr>
    33.       <tr>
    34.         <td class="w"><strong>West</strong>
    35.           <br>Metal
    36.           <br>Gold
    37.           <br>Youth
    38.         </td>
    39.         <td class="c"><strong>Center</strong>
    40.           <br>All
    41.           <br>Purple
    42.           <br>Harmony
    43.         </td>
    44.         <td class="e"><strong>East</strong>
    45.           <br>Wood
    46.           <br>Blue
    47.           <br>Future
    48.         </td>
    49.       </tr>
    50.       <tr>
    51.         <td class="sw"><strong>Southwest</strong>
    52.           <br>Earth
    53.           <br>Brown
    54.           <br>Tranquility
    55.         </td>
    56.         <td class="s"><strong>South</strong>
    57.           <br>Fire
    58.           <br>Orange
    59.           <br>Fame
    60.         </td>
    61.         <td class="se"><strong>Southeast</strong>
    62.           <br>Wood
    63.           <br>Green
    64.           <br>Romance
    65.         </td>
    66.       </tr>
    68.     </table>
    70.     <textarea id="text"></textarea>
    72.     <input type="button" onclick="text.value=''" value="Clear">
    74.     <script src="script.js"></script>
    76.   </body>
    77. </html>
    1. #text {
    2.   display: block;
    3.   height: 100px;
    4.   width: 456px;
    5. }
    7. #table th {
    8.   text-align: center;
    9.   font-weight: bold;
    10. }
    12. #table td {
    13.   width: 150px;
    14.   white-space: nowrap;
    15.   text-align: center;
    16.   vertical-align: bottom;
    17.   padding-top: 5px;
    18.   padding-bottom: 12px;
    19.   cursor: pointer;
    20. }
    22. #table .nw {
    23.   background: #999;
    24. }
    26. #table .n {
    27.   background: #03f;
    28.   color: #fff;
    29. }
    31. #table .ne {
    32.   background: #ff6;
    33. }
    35. #table .w {
    36.   background: #ff0;
    37. }
    39. #table .c {
    40.   background: #60c;
    41.   color: #fff;
    42. }
    44. #table .e {
    45.   background: #09f;
    46.   color: #fff;
    47. }
    49. #table .sw {
    50.   background: #963;
    51.   color: #fff;
    52. }
    54. #table .s {
    55.   background: #f60;
    56.   color: #fff;
    57. }
    59. #table .se {
    60.   background: #0c3;
    61.   color: #fff;
    62. }
    64. #table .highlight {
    65.   background: red;
    66. }
    1. // 现在位于鼠标下方的 <td>（如果有）
    2. let currentElem = null;
    4. table.onmouseover = function(event) {
    5.   // 在进入一个新的元素前，鼠标总是会先离开前一个元素
    6.   // 如果设置了 currentElem，那么我们就没有鼠标所悬停在的前一个 <td>，
    7.   // 忽略此事件
    8.   if (currentElem) return;
    10.   let target = event.target.closest('td');
    12.   // 我们移动到的不是一个 <td> —— 忽略
    13.   if (!target) return;
    15.   // 现在移动到了 <td> 上，但在处于了我们表格的外部（可能因为是嵌套的表格）
    16.   // 忽略
    17.   if (!table.contains(target)) return;
    19.   // 给力！我们进入了一个新的 <td>
    20.   currentElem = target;
    21.   onEnter(currentElem);
    22. };
    25. table.onmouseout = function(event) {
    26.   // 如果我们现在处于所有 <td> 的外部，则忽略此事件
    27.   // 这可能是一个表格内的移动，但是在 <td> 外，
    28.   // 例如从一个 <tr> 到另一个 <tr>
    29.   if (!currentElem) return;
    31.   // 我们将要离开这个元素 —— 去哪儿？可能是去一个后代？
    32.   let relatedTarget = event.relatedTarget;
    34.   while (relatedTarget) {
    35.     // 到父链上并检查 —— 我们是否还在 currentElem 内
    36.     // 然后发现，这只是一个内部移动 —— 忽略它
    37.     if (relatedTarget == currentElem) return;
    39.     relatedTarget = relatedTarget.parentNode;
    40.   }
    42.   // 我们离开了 <td>。真的。
    43.   onLeave(currentElem);
    44.   currentElem = null;
    45. };
    47. // 任何处理进入/离开一个元素的函数
    48. function onEnter(elem) {
    49.   elem.style.background = 'pink';
    51.   // 在文本区域显示它
    52.   text.value += `over -> ${currentElem.tagName}.${currentElem.className}\n`;
    53.   text.scrollTop = 1e6;
    54. }
    56. function onLeave(elem) {
    57.   elem.style.background = '';
    59.   // 在文本区域显示它
    60.   text.value += `out <- ${elem.tagName}.${elem.className}\n`;
    61.   text.scrollTop = 1e6;
    62. }

    image.png
    尝试将鼠标指针移入和移出表格单元格及其内部。快还是慢都没关系。与前面的示例不同，只有

    		被作为一个整体高亮显示。