(译)鼠标移动事件(mouseover/out, mouseenter/leave)

Posted on

原文链接: https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave#tasks

当鼠标在DOM元素之间移动时, 会产生相应的鼠标事件. 现在让我们一起深入研究一下这些事件的细节.

Mouseover/mouseout, relatedTarget

当鼠标移动到一个元素上面时, 产生 mouseover 事件; 当它离开元素时, 产生 mouseout 事件.

mouseover-mouseout

这些事件很特殊, 因为它们有一个 relatedTarget 属性.

对于 mouseover:

  • event.target - 鼠标移上的那个元素
  • event.relatedTarget - 鼠标移出的那个元素(译者注: 鼠标从哪个元素过来的)

对于 mouseout 正好相反:

  • event.target - 鼠标移出的那个元素
  • event.relatedTarget - 鼠标下的新的元素(即: 鼠标去往的那个元素)

在下面的例子中每一个面部特征都是一个元素. 当你移动鼠标时, 你能在它下面的文本框中看到相应的鼠标事件.

每个事件都含记录了它所在的元素以及它来自哪个元素.

relatedTarget 属性可以是 null

relatedTarget 属性可以是 null
这是正常的. 这意味着鼠标并不是来自另一个元素, 而是从 window 之外来的. 或者是离开了 window.
当我们在代码中使用 event.relatedTarget 时应该时刻牢记这种可能性. 如果我们访问 event.relatedTarget.tagName, 此种情况下会抛出异常.

事件频率

当鼠标移动时 mousemove 事件被触发. 但这并不意味着每一像素都会导致一个事件.