介绍

  • mouseenter
    当使用定点设备(例如鼠标或触控板)将光标移动到元素上时,会触发 mouseenter 事件。
  • mouseleave
    当使用定点设备(例如鼠标或触控板)将光标移出某个元素时,会触发 mouseleave 事件。
  • mouseover
    当使用定点设备(例如鼠标或触控板)将光标移动到元素或其子元素之一上时,会在元素上触发 mouseover 事件。
  • mouseout
    当使用定点设备(例如鼠标或触控板)将光标移出元素或其子元素之一上时,会在元素上触发 mouseout 事件。
  • mousemove
    当使用定点设备(例如鼠标或触控板)将光标在元素上移动时,mousemove 事件被触发(事件冒泡)。

冒泡

事件冒泡指将事件定向到其预期的目标的过程:

  • 单击按钮并将事件定向到该按钮;
  • 如果为该对象设置了事件处理程序,则触发该事件;
  • 如果没有为该对象设置事件处理程序,则事件会向上冒泡(就像水中的气泡)到对象的父级;
  • 事件从父级冒泡到父级的父级,直到它被处理,或者直到它到达 document 对象为止。

事件是否为冒泡事件可由 event.bubbles 事件属性返回。

  • true - 事件可通过 DOM 冒泡
  • false - 事件不冒泡


事件处理:网景主张捕获方式(事件从根节点到子节点传播),微软主张冒泡方式(事件从子节点到根节点传播),w3c 采用了两种方式的统一标准。addEventListener 的第三个参数指定一个 Boolean,表示冒泡还是捕获,默认 false,表示在冒泡阶段执行,为 true 则表示在捕获阶段执行。第三个参数也可以指定一个键值选项,例如 once: true 表示只执行一次,这时的冒泡和捕获要用键值 capture 表示。

<button onclick="console.log(event.bubbles)">点击按钮查看 onclick 事件是否为冒泡事件</button>

addEventListener 的第三个参数可以指定一个 Boolean,表示冒泡还是捕获,默认 false,表示在冒泡阶段执行,为 true 则表示在捕获阶段执行。第三个参数也可以指定一个键值选项,例如 once: true 表示只执行一次,这时的冒泡和捕获也要用键值 capture 表示。

示例

总结

鼠标从移入元素到移出,事件执行顺序为:

  • 鼠标移入时,先触发 mouseover,再触发 mouseenter,然后 mousemove;
  • 鼠标移出时,先触发 mouseout,再触发 mouseleave。

冒泡:

  • mouseenter mouseleave 不会冒泡;
  • 而 mouseover mouseout 会冒泡,即从自身元素和子元素上之间移动时也会触发。