jQuery鼠标移动事件

概念

个人理解：

jQuery鼠标移动事件是最常用的鼠标事件之一，当用户使用鼠标在指定的元素上移动时即与该元素产生交互，就会触发鼠标移动事件，比如：鼠标在指定元素上移入、移出、悬停等等操作，都属于鼠标移动事件的范围。

mouseenter()&mouseleave() 事件函数

说明：

当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。
当鼠标指针离开被选元素时，会发生 mouseleave 事件。mouseleave() 方法触发 mouseleave 事件，或添加当发生 mouseleave 事件时运行的函数。

通常mouseenter事件与mouseleave事件一起搭配使用。

语法：

触发被选元素的 mouseenter与mouseleave 事件：

$(selector).mouseenter()
$(selector).mouseleave()

 添加函数到 mouseenter与mouseleave 事件：

$(selector).mouseenter(function)
$(selector).mouseleave(function)

解释：

mouseenter()与mouseleave()事件函数的参数是回调函数，可选项，当mouseenter事件与mouseleave事件被触发时，该回调函数就会执行。

示例：

    
        
        
        
    
    
    
    	
鼠标移动到该段落。
    

 mouseover()&mouseout() 事件函数

说明：

当鼠标指针位于元素上方时，会发生 mouseover 事件。mouseover() 方法触发 mouseover 事件，或添加当发生 mouseover 事件时运行的函数。
当鼠标指针离开被选元素时，会发生 mouseout 事件。mouseout() 方法触发 mouseout 事件，或添加当发生 mouseout 事件时运行的函数。

通常mouseover事件与mouseout事件会一起搭配使用。

语法：

触发被选元素的 mouseover 与mouseout事件： 

$(selector).mouseover()
$(selector).mouseout()

 添加函数到 mouseover与mouseout 事件：

$(selector).mouseover(function)
$(selector).mouseout(function)

解释：

mouseover()与mouseout()事件函数的参数是回调函数，可选项，当mouseover事件与mouseout事件触发时，该回调函数执行。

示例：

    
         
        
        
    
    
    
    	
鼠标移动到这个段落上。
    

鼠标移入与移出事件对比

mouseenter与mouseover事件的区别：

• mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。
• mouseenter 事件只在鼠标移动到选取的元素上时触发。

 mouseleave与mouseout事件的区别： 

• mouseout 事件在鼠标离开任意一个子元素及选的元素时触发。
• mouseleave 事件只在鼠标离开选取的的元素时触发。

详细解释可以查看jQuery事件冒泡相关词条。

mousemove() 事件函数

说明：

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove() 方法触发 mousemove 事件，或添加当发生 mousemove 事件时运行的函数。
用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

语法：

触发被选元素的 mousemove 事件：

$(selector).mousemove()

 添加函数到 mousemove 事件：

$(selector).mousemove(function)

解释：

mousemove()函数的参数是回调函数，可选项，当mousemove事件触发时，该函数就会被执行。

示例：

    
         
        
        
    
    
    	
鼠标指针的坐标是: .