代码如下:
几个嵌套的p,对每个p添加mouseenter监听器。
function fun1(){ console.log(event.currentTarget.id); } d1.addEventListener("click",fun1,false); d2.addEventListener("click",fun1,false); d3.addEventListener("click",fun1,false);
当鼠标移到最里面的d3时,控制台依次输出
d1
d2
d3
意思应该就是,先在外层p触发,再依次在子p触发。
如果从d3(最内层)移到d2,由于已经在一开始触发d2的mouseenter,因此此时也不会触发d2的mouseenter。
而从d1(最外层)移到d2,由于已经在d1内,就只触发d2的mouseenter。
mouseover定义为从元素外部第一次移动到元素边界触发。
把事件监听器改成mouseover后,当鼠标从左侧移到d3,依次输出:
d3
d2
d1
也就是从d3冒泡到d1了。
难道是d3和d2,d1的边界重合了,因此只触发d3的mouseover然后冒泡吗?如果按照mouseenter的理解,它也进入了d2和d1的边界吧。
而从d3移到d2,会依次输出:
d2
d1
也就是从d2冒泡到d1。
上面的操作相当于移出了d3的边界吧,这时候触发了d2的mouseover,这是说在d3的边界也就是d2的边界吗?
只能先记着
mouseover会在进入元素或其子元素时触发
mouseenter只在进入元素时触发