20160213 jQuery hover() 和 mouseover()

jQuery hover() 和 mouseover()

张鑫旭老师:jQuery的hover方法是有别于mouseover与mouseout方法,例如,鼠标移动到div内部的一个的图片上,如果是使用mouseover与mouseout方法,当鼠标“悬停”在图片上时会触发mouseout事件,这是不合理的。而jQuery的hover方法则修正了这个问题。

mouseover

jQuery API

Bind an event handler to the “mouseover” JavaScript event, or trigger that event on an element.
绑定 mouseover 事件,或者触发事件。

// 调用时参数有事件处理程序 function
.on("mouseover", hander)
// 调用时不带参数
.trigger("mouseover")

当鼠标指针进入时触发。

hover

jQuery API
Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
在鼠标进入和离开元素时被执行,写两个函数分别处理鼠标进入和离开时的事件。或者一个函数同时处理进入和离开时的实践。

区别:

Calling $(selector).hover(handlerIn, handlerOut) is shorthand for: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.
mouseover 在进入子元素时也会被触发,而 mouseenter 只会在进入当前元素时被触发。jQuery API 中有 Demo

Because of this, .mouseover() is not the same as .hover(), for the same reason .mouseover() is not the same as .mouseenter().