在原生js上移入移出共有两种
一种是冒泡的
鼠标移入或移出被选元素及其所有子元素就会触发
element.onmouseover = function(){alert("移入");}element.onmouseout = function(){alert("移出");}
一种是不冒泡的
鼠标移入或移出被选元素才会触发
element.mouseenter = function () {alert('移入');};element.mouseleave = function () {alert('移出');};
在jq本质上也是有两种
通过js封装的,触发条件以及冒泡也都是跟原生js一样,写法略有出入
element.mouseover(function () {console.log("移入");});element.mouseout(function () {console.log("移出");});
element.mouseenter(function () {console.log("移入");});element.mouseleave(function () {console.log("移出");});
jq为了方便编写,封装了hover方法,源代码如下,本质上也是mouseenter与mouseleave,牢记避坑
k.fn.extend({hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}})