[记录]mouseover/mouseenter 以及 mouseout/mouseleave 的区别

mouseover 和 mouseenter 事件都是在鼠标移入元素时触发。
mouseout 和 mouseleave 事件，都是鼠标移出元素时触发。

不同点在于：mouseover 和 mouseout 事件会冒泡，而 mouseenter 和 mouseleave 事件不会冒泡。

下面是一个例子：
1.HTML

    
    
    
    
    


    

        Outer
        
Inner
    

2.处理 mouseover 和 mouseout 事件：

将鼠标移入到 #inner 元素，查看运行结果：

// 移入到 #outer 元素
Mouseover:outerEle
// 移入到 #inner 元素
Mouseover:innerEle
// 移入到 #inner 元素上时，冒泡到 #outer 元素
Mouseover:outerEle

3.处理 mouseenter 和 mouseleave 事件
将代码修改下，处理 mouseenter 和 mouseleave 事件：

运行结果：

// 移入到 #outer
Mouseenter:outerEle
// 移入到 #inner，事件并未冒泡到 #outer
Mouseenter:innerEle

可见 mouseenter 和 mouseleave 是为了方便在鼠标移入/移出元素时的冒泡处理，如果在 mouseover 和 mouseout 中阻止冒泡，就能达到和 mouseenter 和 mouseleave 一样的效果：

执行结果略。

注：在 DOM 事件中，关于表单元素获取/丢失焦点，有四个相关的事件：

• focus
• blur
• focusin
• focusout

当表单元素获取焦点后，会触发 focus 和 focusin 事件，当表单元素失去焦点后，会触发 blur 和 focusout 事件，其中 focusin 和 focusout 事件跟 focus 和 blur 事件的区别是：focusin 和 focusout 事件会冒泡（即表单元素的父节点可以绑定这两个事件，在获取/失去焦点后，会触发父节点上的相关事件处理函数），而 focus 和 blur 事件不会冒泡，将这两个事件绑定到父节点时不会有任何效果。

完。