onmouseover 与 onmouseenter 作为两个效果相似的鼠标事件,经常被我们使用,但是二者还是有区别的。
在具体的使用中,两者的效果是相似的,使用的场景并没有太大的区别,效果类似css中的hover。但是,两者还是存在一定的区别的,那就是mouseenter不支持冒泡,而mouseover支持冒泡。冒泡指的是事件冒泡,即在子元素上触发的事件会向上传递至父级元素,并触发绑定在父级元素上的相应事件。
那么,如何证明这两个事件是否支持,事件冒泡呢,js的事件机制给了我们一个很好的解决方法,那就是target(事件源),在事件触发时,浏览器会产生一个event对象,在这个对象上有一个target属性,指向了触发事件的最底层的DOM,通过target我们可以准确的找到事件触发的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onmouseover&onmouseenter</title>
<style>
#outer{
position: relative;
width: 200px;
height: 200px;
margin: 100px;
border: 1px solid #ccc;
}
#inner{
position: absolute;
left: -50px;
top: 0;
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
<script>
outer.onmouseenter = function(e){
console.log(e.target.id) // outer
}
outer.onmouseover = function(e){
console.log(e.target.id) // inner
}
</script>
</body>
</html>
效果图:
当鼠标移到outer时:
当鼠标移到outer中的inner时:
当鼠标移到outer外的inner时: