mouseover、mouseout和mouseenter、mouseleave之间的区别(配对使用)

简介: mouseover、mouseout和mouseenter、mouseleave之间的区别(配对使用)

以上四个事件都是与鼠标相关的事件,其中mouseenter和mouseover均是鼠标移入时触发的事件,但是使用mouseover的时候会触发冒泡事件,也就是,当父元素和子元素均绑定mouseover事件的时候,如果触发子元素的mouserover事件,则同样会触发父元素的mouserover事件。但是使用onmouseenter则不会触发父节点的同名事件。


因此,如果不希望触发冒泡事件的时候尽量使用mouseenter和mouseleave。 用onmouseenter则不会触发父节点的事件。


!!!事件委托由于是鼠标经过子元素触发父元素的冒泡事件,所以事件委托需要用mouseover、mouseout。

是不是很难记住?  我们注意mouseover、mouseout的后面那两个单词是over和out都是o开头的,把那个o当成泡泡,o开头的会冒泡,就记得啦!


目录
打赏
0
0
0
0
1
分享
相关文章
addEventlistener和正常的onclick=()=> 的区别
【10月更文挑战第29天】`addEventListener` 是一种更推荐的添加事件处理函数的方式,它提供了更好的灵活性、可维护性和代码结构,能够满足复杂的事件处理需求,而 `onclick` 属性则更适合简单的、一次性的事件绑定场景,且在现代的JavaScript开发中,应尽量避免在HTML中直接使用 `onclick` 属性,以提高代码的质量和可维护性。
事件绑定(onmouseout,onmouseover)
事件绑定(onmouseout,onmouseover)
57 0
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
552 1
clientX和clientY 事件属性的使用
clientX和clientY 事件属性的使用
114 0

热门文章

最新文章