鼠标事件-南宁鼠标价格社区

click与dblclick事件

在交互操作中，最简单的操作就是点击操作。

click方法用于监听用户的单击操作

dblclick方法用于监听用户的双击操作

方法一：$ele.click()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的较少

eg：

//html代码

//JavaScript代码

$( "ele" ).click(function(){

alert( ' 触发指定事件' )

})

$( " #test " ).click(function(){

$( "ele").click() //手动指定触发事件

})

方法二：$ele.click( handler(eventObject))

绑定$ele元素，每次$ele元素触发点击操作执行回调 handler 函数，这样可以针对书记兼的反馈做很多操作，方法中的 this 是指向了绑定事件的元素

eg：

//html代码

//JavaScript代码

$( " #test " ).click(function(){

//this指向 div 元素

})

方法三：$ele.click([eventData], handler(eventObject))

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

eg：

//html代码

//JavaScript代码

$( " #test " ).click(111, function(){

//this指向 div 元素

//e.data => 111 传递数据

})

dblclick()的用法和click()的用法是类似的

dblclick 与 click 事件不同的是：

click事件触发需要一下几点：

click事件其实是有 mousedowm 与 mouseup 2个动作构成，所有点击动作只有松手后才会触发

dblclick事件触发需要以下几点：

dbclick是由2个click叠加而来的，所以dblclick 事件只有在满足以下条件按的情况下才能被触发

鼠标指针在元素里面时点击。
鼠标指针在元素里面时释放。
鼠标指针在元素里面时再次单击，点击间隔时间，是由系统而定。
鼠标指针在元素里面时再次释放

注：在同一元素上同时绑定 click 和 dblclick事件是不可取的。各个浏览器事件触发的顺序时不同的，一些浏览器在dblclick之前接收 2 个click事件，而一些浏览器只接受一个click事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度。

mousedown与mouseup事件

mousedown用于监听用户鼠标按下的操作

mouseup用于监听用户鼠标弹起的操作

方法一：$ele.mousedown()

绑定$ele元素，不带任何参数一般用来指定触发一个事件，用的较少

eg：

//html代码

//JavaScript代码

$( "ele" ).mousedown(function(){

alert( ' 触发指定事件' )

})

$( " #test " ).mousedown(function(){

$( " ele " ).mousedown() //手动指定触发事件

})

方法二：$ele.mousedown( handler(eventObject))

绑定$ele元素，每次$ele元素触发点击操作执行回调 handler 函数

eg：

//html代码

//JavaScript代码

$( " #test " ).mousedown(function(){

//this指向 div 元素

})

方法三：$ele.mousedown([eventData], handler(eventObject))

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

eg：

//html代码

//JavaScript代码

$( " #test " ).mousedown(111, function(){

//this指向 div 元素

//e.data => 111 传递数据

})

mousedown事件触发需要以下几点：

mousedown强调是按下触发
如果在一个元素按住了鼠标不放，并且拖动鼠标离开这个元素，并释放鼠标键，这仍然是算作mousedown事件
任何鼠标按钮被按下时都能触发mousedown事件
用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

mouseup事件触发需要以下几点：

mouseup强调是松手触发，与mousedown是相反的
mouseup与mousedown组合起来就是click事件
如果用户在一个元素上按下鼠标按键，并且拖动鼠标离开这个元素，然后释放鼠标键，这仍然是算作mouseup事件
任何鼠标按钮松手时都能触发mouseup事件
用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

click与mousedown的区别

click事件其实是由mousedown于mouseup 2个动作构成，所以点击的动作只有在松手后才触发

mousemove事件

用于交互操作中，基于移动的机制可以做出拖拽、拖动等一系列效果。

方法一：$ele.mousemove()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，

eg：

//html代码

//JavaScript代码

$( "ele" ).mousemove(function(){

alert( ' 触发指定事件' )

})

$( " #test " ).click(function(){

$( " ele " ).mousemove() //指定触发事件

})

方法二：$ele.mousemove(handler( eventObject) )

绑定$ele元素，每次 $ele 元素触发点击操作会执行回调 handler 函数

eg：

//html代码

//JavaScript代码

$( " #test " ).mousemove(function(){

//this指向 div 元素

})

方法三：$ele.mousemove([eventData], handler(eventObject))

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

eg：

//html代码

//JavaScript代码

$( " #test " ).mousemove(111, function(){

//this指向 div 元素

//e.data => 111 传递数据

})

mousemove事件触发需要以下几点：

mousemove事件是当鼠标指针移动时触发的，即使是一个像素
如果处理器做任何重大的处理，或如果该事件存在多个处理函数，这肯造成浏览器的严重的性能问题

mouseover与mouseout事件

监听用户的移入/移出操作，2种方法类似

方法一：$ele.mouseover()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，

eg：

//html代码

//JavaScript代码

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

alert( ' 触发指定事件' )

})

$( " #test " ).click(function(){

$( " ele " ).mouseover() //指定触发事件

})

方法二：$ele.mouseover(handler( eventObject) )

绑定$ele元素，每次 $ele 元素触发点击操作会执行回调 handler 函数

eg：

//html代码

//JavaScript代码

$( " #test " ).mouseover(function(){

//this指向 div 元素

})

方法三：$ele.mouseover([eventData], handler(eventObject))

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

eg：

//html代码

//JavaScript代码

$( " #test " ).mouseover(111, function(){

//this指向 div 元素

//e.data => 111 传递数据

});

mouseenter与mouseleave事件

用于交互操作中，判断鼠标是否移动到 元素内部或元素外部，三种参数传递方式与mouseover和mouseout是一模一样的，
mouseenter 事件与 mouseover 的区别

关键点就是：冒泡的方式处理问题

eg：

<div>

<p>鼠标离开此区域触发 mouseleave 事件</p>

</div>

如果在 p 元素与 div 元素都绑定 mouseover 事件，事件在离开 p 元素，但是没有离开 div元素的时候，触发结果：

p 元素响应事件
div 元素响应事件

这里的问题是 div 为什么被触发？原因是事件的冒泡问题，p 元素触发了 mouseover，他会一直往上找父元素上的 mouseover 事件，如果父元素有mouseover 事件就会被触发

所以，在这种情况下，jQuery推荐使用 mouseenter 事件

mouseenter 事件只会在绑定它的元素上被调用，而不是在后代节点上被触发。

hover事件

$( selector ) . hover ( handlerIn , handlerOut )

handlerIn ( eventObject ): 当鼠标指针进入元素时触发执行的事件函数
handlerOut ( eventObject ): 当鼠标指针离开元素时触发执行的事件函数

eg：

// hover()方法是同时绑定 mouseenter和 mouseleave事件。

// 我们可以用它来简单地应用在鼠标在元素上行为

$("p").hover(

function() {

$(this).css("background", 'red');

function() {

$(this).css("background", '#bbffaa');

}

);

focusin事件

当一个元素，或其内部任何一个元素获得焦点的时候，例如：input 元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个 focusin 事件

方法一：$ele.focusin()

绑定$ele 元素，不带任何参数一般是指触发一个事件

eg：

//html代码

//JavaScript代码

$( "ele" ).focusin ( function(){

alert( ' 触发指定事件' )

})

$( " #test " ).mouseup (function(){

$( " ele " ).focusin ( ) //指定触发事件

})

方法二：$ele.focusin ( handler )

绑定$ele元素，每次 $ele 元素触发点击操作会执行回调 handler 函数

eg：

//html代码

//JavaScript代码

$( " #test " ).focusin (function(){

//this指向 div 元素

})

方法三：$ele.focusin ([eventData], handler )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

eg：

//html代码

//JavaScript代码

$( " #test " ).focusin (111, function( e ){

//this指向 div 元素

//e.data => 111 传递数据

})

focusout事件

当一个元素，或其内部任何一个元素失去焦点的时候，例如：input 元素，用户在点击失去焦点的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个 focusout 事件

方法一：$ele.focusout()

绑定$ele 元素，不带任何参数一般是指触发一个事件

eg：

//html代码

//JavaScript代码

$( "ele" ).focusout ( function(){

alert( ' 触发指定事件' )

})

$( " #test " ).mouseup (function(){

$( " ele " ).focusout ( ) //指定触发事件

})

方法二：$ele.focusout ( handler )

绑定$ele元素，每次 $ele 元素触发点击操作会执行回调 handler 函数

eg：

//html代码

//JavaScript代码

$( " #test " ).focusout (function(){

//this指向 div 元素

})

方法三：$ele.focusout ([eventData], handler )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

eg：

//html代码

//JavaScript代码

$( " #test " ).focusout (111, function( e ){

//this指向 div 元素

//e.data => 111 传递数据

})

focusin是聚焦事件，点击的时候触发，focusout是失焦事件，当鼠标点击对象后再点击别处事触发。