vue划入划出事件_jQuery鼠标划入划出

今天来简单的谈谈jQuery的一个划入划出的方法，。首先划入划出能想到的东西有哪些呢，。

1：hover

2：mouseenter/mouseleave

3:mouseover/mouseout.

一共是三中方法，先来说说他们的使用方法

$(".evo").hover(function(){

$(this).addClass("red");

},function(){

$(this).removeClass("red");

})

这样写有点乱，那就写清楚点

$("").hover(function(){

},function(){

})

其实就这么一点代码，一共两个function,是因为划入划出，第一个function定义的是划入的效果，第二个function里面定义的是划出的效果，。

在来看看第二种

$(".evo").mouseenter(function(){

$(this).addClass("red");

})

$(".evo").mouseleave(function(){

$(this).removeClass("red");

})

再来看看第三种

$(".evo").mouseover(function(){

$(this).addClass("red");

})

$(".evo").mouseout(function(){

$(this).removeClass("red");

})

再来说说他们的区别，这三者之间的区别其实只是两者的区别，首先hover其实和mouseenter+mouseleave是一样的，从字面上就可以理解，一个是鼠标进入，一个是鼠标离开，而mouseover/mouseout和他们之间的区别是上面呢，一般情况下不容易看出来，但是给他们触发的元素里面有子元素就可以看出效果了，。

当用hover或者mouseenter/mouseleave的时候，鼠标移到元素上的时候会触发时间，当再在元素上移到器子元素上的时候就不会再触发了，。

但是mouseover/mouseout就不同了，鼠标移到元素上的时候会触发时间，由元素上移到子元素又会触发，由子元素移到父元素又会再次触发，会不停的触发。

而hover或者mouseenter/mouseleave只会触发一次。鼠标只要是在元素中和其父元素中活动都不会再次触发。