mouseover与mouseenter
mouseover
: 只要鼠标指针移入事件所绑定的元素或其子元素,都会触发该事件
mouseenter
: 只有鼠标指针移入事件所绑定的元素时,才会触发该事件
换句话说就是,如果一个元素没有子元素,那么该元素绑定mouseover或者mouseenter两种事件效果没有区别,鼠标每次移入元素时都只会触发一次事件
如果绑定了mouseover事件的元素存在子元素,那么,每次移入该元素时都会触发一次事件(包括从外部移入到该元素和从子元素移入该元素),移入子元素时也会触发一次事件。
<div class="box over" onmouseover="over()">
<span>over</span>
</div>
<div class="box enter" onmouseenter="enter()">
<span>enter</span>
</div>
// mouseover事件
function over() {
console.log('触发了mouseover事件!');
}
// mouseenter事件
function enter() {
console.log('触发了mouseenter事件!');
}
mouseout和mouseelave
mouseout
: 只要鼠标指针移出事件所绑定的元素或其子元素,都会触发该事件
mouseleave
: 只有鼠标指针移出事件所绑定的元素时,才会触发该事件
如果一个元素没有子元素,那么该元素绑定mouseout或者mouseleave两种事件效果没有区别,鼠标每次移出元素时都只会触发一次事件;
如果绑定了mouseout事件的元素存在子元素,那么,每次移出该元素时都会触发一次事件(包括从该元素移出至外部和从该元素移出至子元素),从子元素移出时也会触发一次事件。
<div class="box out" onmouseout="out()">
<span>out</span>
</div>
<div class="box leave" onmouseleave="leave()">
<span>leave</span>
</div>
// mouseout事件
function out() {
console.log('触发了mouseout事件!');
}
// mouseleave事件
function leave() {
console.log('触发了mouseleave事件!');
}
通过以上图文详解,相信你已经能清楚这些事件之间的区别了吧!如果你看完还是有疑问的话,请戳→此处←亲身体验吧~