JavaScript---常用的鼠标事件mouseover 和mouseenter的区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript---常用的鼠标事件mouseover 和mouseenter的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、 mouseover 和mouseenter的区别

mouseover: 只要鼠标指针移入事件所绑定的元素或其子元素，都会触发该事件
mouseenter: 只有鼠标指针移入事件所绑定的元素时，才会触发该事件

简单来说：

1、mouseover和mouseout会有事件冒泡，也就是说鼠标移入、移出当前元素的子元素或父元素时都会触发该事件。
2、mouseenter和mouseleave 事件不会冒泡，依旧是说鼠标移入、移出时，该元素的子元素或父元素不会触发该事件。

二、事件传播的机制(冒泡和捕获)

事件捕获（event capturing）：当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点

对于addEventListener的说明：

addEventListener("没有on的事件类型","事件处理函数","控制事件阶段") 事件控制阶段中：

false：冒泡阶段 true：捕获阶段 e.eventPhase 判断事件阶段(冒泡和捕获不能同时出现)

三、阻止事件的传播

在W3c中，使用stopPropagation（）方法
在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~文章来源地址https://www.toymoban.com/news/detail-485480.html

到了这里，关于JavaScript---常用的鼠标事件mouseover 和mouseenter的区别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！