DOM-14 【实战】解决事件代理和鼠标移动事件的窘态

鼠标的滑入滑出

案例

事件	现象	应用场景
mouseover/mouseout	绑定在父元素时，对她的所有子元素，事件都生效	dom结构简单
mouseenter/mouseleave	只对她绑定的元素有效，对window绑定无效	dom结构简单
mousemove	长触发	dom结构复杂

在这里插入图片描述

// 绑定在父元素上
// 即使取消冒泡，这个结果也不变，证明这个现象不是冒泡造成的
<body><div class="outer"><div class="inner"></div></div><script>var oOuter = document.getElementsByClassName('outer')[0],oInner = document.getElementsByClassName('inner')[0]oOuter.onmouseover = function () {console.log('outer移入')}oOuter.onmouseout = function () {console.log('outer移出')}</script>
</body>

// 绑定在子元素上
oInner.onmouseover = function (e) {console.log('inner移入')
}
oInner.onmouseout = function (e) {console.log('inner移出')
}

在这里插入图片描述

// 或者改变绑定的事件，效果同上
var oOuter = document.getElementsByClassName('outer')[0],oInner = document.getElementsByClassName('inner')[0]
oOuter.onmouseenter = function () {console.log('outer移入')
}
oOuter.onmouseleave = function () {console.log('outer移出')
}