极客观点
项目管理
HarmonyOS
不愿复制粘贴的点这里
把源码也贴出来吧
<div id="container" style="width:200px;height:200px;background:blue;">
<div id="child" style="width:100px;height:100px;background:red;">
</div>
</div>
<script type="text/javascript">
var container=document.getElementById("container");
container.onmouseover=function(){
var val=200,that=this;;
setInterval(function(){
if(val<2000){
setWidth(that,val);
val+=10;
}
},100);
}
function setWidth(obj,val){
return obj.style.width=parseInt(val)+"px";
}
</script>把鼠标放在div#container（除div#child以外的区域）上正常触发onmouseover事件，但是这里再把鼠标移到div#child上就又会触发一次
onmouseover事件（想想确实是这样哈），两次事件同时执行，顿时就亮瞎眼了。平时都用jquery，还真没发现这种问题，果然站在巨人的肩膀上就是好啊。
上面这个问题算了解决了，再问一个关于事件冒泡的新问题
这个例子中，我addEventListener()的第三个参数都设为true，也就是都在捕获阶段绑定事件处理函数，这应该不同于冒泡阶段绑定事件处理函数吧。所以按道理点击div#child的时候应该是先触发div#container的点击事件，再触发div#child的点击事件吧？然而现实却是相关的，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container" style="width:200px;height:200px;background:blue;">
<div id="child" style="width:100px;height:100px;background:red;">
</div>
</div>
<script type="text/javascript">
var container=document.getElementById("container");
container.addEventListener("click",function(){
alert("I am parent!"),true
})
child.addEventListener("click",function(){
alert("I am child!"),true
})
</script>
</body>
</html>
这事还真和事件冒泡有关系，看看这个（记得按 F12 把开发者工具的控制台打开）
https://jsfiddle.net/f7920oqd/
mouseover 在鼠标移入 container 和 child 的时候都会触发
mouseenter 只有在刚进入 container 的时候触发，移入移出 child 都不会触发。