mouseenter与mouseover区别

2019-2-15 16:15| 作者: admin| 查看: 22| 评论: 0|来自: 凯博

编程中有很多概念比较类似,甚至在某些场景下功能完全一样。

当然两者是有区别的,否则就没有同时存在的必要,这些区别也决定了它们各自应用场景。

标题中两事件就如上面阐述那样,某些场景下功能完全相同,但区别也很明显。

下面通过代码实例介绍一下两者的共同点和区别,希望能够给需要的朋友带来一些朋友。

一.两个事件的共同点:

从名称来看,两个事件都达到了同一个目的,那就是鼠标指针进入指定元素之内。

仅从上面这个单纯的角度来看,两个事件的表现可以说完全一样,看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码




凯博

  


  

代码运行效果截图如下:

a:3:{s:3:\

上述代码分别为两个div注册各自事件的事件处理函数,两个事件的表现可以说完全一样。

鼠标指针移入两个div各自事件会触发,然后将指定的字符串写入div中。

上面两个事件的表现正是让人迷惑的地方,再通过代码实例解决两者的区别。

二.两个事件的区别:

两个事件的最重要的区别是,mouseenter不支持事件冒泡,mouseover支持事件冒泡。

关于事件冒泡现象可以参阅JavaScript 事件冒泡一章节。

也是由于这个区别,会在实际应用中导致一些列不同的现象,也决定了两者应用场景的不同。

下面通过代码实例演示一下由于是否支持事件冒泡导致一些区别。

[HTML] 纯文本查看 复制代码运行代码




凯博

  


上述代码可以很好的演示由于是否具有事件冒泡导致的一些差别。

下面介绍一下如何通过上述代码来演示两者之间的区别。

(1).为enter元素注册mouseenter事件处理函数,当鼠标移入enter元素的时候,事件触发。

(2).于是enterCount数字加1,这个没有任何异议,不过下面要注意了。

(3).当鼠标指针移入它的子元素的时候,子元素的mouseenter事件触发,但是由于此事件并不具有冒泡效果,所以不会传播到父元素,于是enterCount不会再增加。

(4).当鼠标指针从子元素再次移入父元素的时候,事件不再触发。

(5).再来看mouseover事件,当鼠标移入over元素,此事件会触发,并且数字加1,毫无异议。

(6).现在鼠标移入它的子元素,数字在原来基础还会加1,这是因为此事件具有冒泡现象,事件传播到over元素,于是又一次执行事件处理函数,下面的这一点要特别注意。

(7).当鼠标从子元素中移出到父元素的时候,数字也会在原来基础上加1,这一点与mouseenter事件不同。

总结如下:

(1).当鼠标指针从元素边界之外移入的时候才会触发mouseenter事件。

(2).鼠标指针移入无论是从编辑外移入还是从子元素移入都会触发mouseover事件。

清晰了两个事件的区别之后,就可以根据当前的实际需求,选择更为恰当的事件,比如,当我们仅仅是处理父元素相关事物,可以考虑mouseenter事件,因为它没有事件冒泡等因素的影响。如果父元素的子元素较多,需要针对鼠标移入每一个子元素进行的事件进行处理,如果对每一个子元素注册事件处理函数,那实在太麻烦了,这时候推荐使用mouseover事件,利用其冒泡原理,将事件注册在父元素上。

最新评论

返回顶部