鼠标移入移出事件，mouseover、mouseenter区别

简单介绍：

js中有两组鼠标移入移出事件：（旧的）mouseover、mouseout与（新的）mouseenter、mouseleave，不建议混着使用。

两者的区别是，新的鼠标移入移出事件，去掉了冒泡和捕获的特性。而旧的鼠标移入移出事件，是存在这个特性的。他们并不存好坏，一切根据需求来使用。

两组事件的区别：

先说旧的事件，我们在给元素绑定事件时：

let box1 = document.querySelector(".box1")
// 绑定事件方式1box1.onmouseover = function() {console.log("???????")}
// 绑定事件方式2box1.addEventListener("mouseover",function(event) {console.log("???????")})

不管那种绑定事件方式，现在dom元素已经被监听了。只要鼠标满足条件（mouseover），事件处理函数，就会被执行。mouseover指的是：任意另一个除了box1以外的dom元素，移动到事件绑定的box1元素上时，事件处理函数就会被执行，这是事件执行机制。

至于冒泡、捕获，就是从内向外冒泡或从外向内捕获的执行机制：

<div class="box1"><div class="box2"></div>
</div>

现在我们给box1绑定的鼠标事件，此时我们鼠标移动到box2上时，box1的事件处理函数也会被执行，这就是从内向外冒泡的执行机制。并且box2的外层如果还有鼠标移入事件的话，其对应的事件处理函数也会被执行，直至根标签html。

如果觉得这种不断向外的冒泡执行机制很烦，只希望外部dom元素移动到box1元素内部以后，才执行事件处理函数。此时就可以使用新的事件 mouseenter。

大概这些。

鼠标移入移出事件，mouseover、mouseenter区别相关推荐

vue中鼠标移入移出事件种类以及区别
1.@mouseover与@mouseout 鼠标经过时自身触发事件,其子元素同时也触发该事件. 父亲有的东西,儿子也有 ,支持冒泡. 适用于鼠标移入移出时子元素也会执行事件的场景,或者单一标签. 2 ...
jq鼠标移入移出显示和隐藏_jQuery实现鼠标移入移出事件切换功能示例
这篇文章主要介绍了jQuery实现鼠标移入移出事件切换功能,结合实例形式分析了jQuery不同版本处理鼠标事件响应与触发相关操作技巧,需要的朋友可以参考下. jQuery实现鼠标移入移出事件切换功能 ...
JavaScript事件委托之鼠标移入移出事件
鼠标移入移出事件 <div class="parent">父元素<div class="child">子元素</div>&l ...
vue按钮移上去显示提示_vue 鼠标移入移出事件（移入出现按钮），element-ui表格移入移出...
效果图: 注:@mouseenter="enter(index)" @mouseleave="leave()" 重点下载删除 data() { retu ...
js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){$(".weixinTop").show();},function( ...
html鼠标移入移除事件,js鼠标移入移出事件样例
javaScript实例 li{background-color:#eee;height:25px;margin-top:2px;} //添加鼠标移入移出事件 function fun(){ //获取 ...
web前端开发第二阶段——鼠标移入移出事件
鼠标移入/移出事件 : 鼠标移入 :onmouseenter 鼠标移出 : onmouseleave <!DOCTYPE html> <html> <head>&l ...
vue鼠标移入移出事件注意事项
发生冒泡事件今天在写一个鼠标的移入移出的事件,使用mouseout和mouseover期间,踩了一个大坑,经过半天的排查,终于发现是发生了冒泡事件. 把mouseout和mouseover绑在父元素 ...
杨老师课堂之JavaScript悬浮事件（鼠标移入移出事件）
今天给大家分享一个简单的JavaScript事件案例: 该事件属于悬浮事件改代码逻辑非常简单,主要是当鼠标移动到按钮上显示一个盒子,移开之后盒子隐藏 JavaScript事件中 onmouseov ...

鼠标移入移出事件，mouseover、mouseenter区别

鼠标移入移出事件，mouseover、mouseenter区别相关推荐

最新文章

热门文章