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开头的会冒泡,就记得啦!


相关文章
|
6月前
|
JavaScript
checkbox选中和取消,控制dom元素颜色变化
checkbox选中和取消,控制dom元素颜色变化
29 0
|
11月前
|
JavaScript
BOM ------ mouseenter 和 mouseover 的区别
BOM ------ mouseenter 和 mouseover 的区别
|
JavaScript 前端开发
详细区分offsetX,clientX,pageX,screenX,layerX和X的区别
详细区分DOM事件中鼠标指针的坐标问题 前面博客中我们讲解到了DOM事件的event对象,里边包含了鼠标事件的指针坐标属性。比如event.offsetX,event.clientX,event.pageX,event.screenX等等。现在我们来解析一下这些坐标属性的区别。 HTML代码: <div class="box"></div> <div class="box2"></div> 1 2 CSS代码: .box{ width: 200px; height: 200px; backgro
 详细区分offsetX,clientX,pageX,screenX,layerX和X的区别
|
JavaScript 程序员
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
124 0
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
|
Web App开发 前端开发 iOS开发
使用 tabindex 配合 focus-within 巧妙实现父选择器
使用 tabindex 配合 focus-within 巧妙实现父选择器
126 0
使用 tabindex 配合 focus-within 巧妙实现父选择器
|
Web App开发 前端开发 JavaScript