jQuery(事件篇)

三、事件篇

1. 鼠标事件

(1) click与dbclick事件

$ele.click():绑定$ele元素,不带任何参数一般是用来指定触发一个事件。

$ele.click( handler(eventObject) ):绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数,这样可以针对事件的反馈做很多操作了,方法中的this是指向了绑定事件的元素

$ele.click( [eventData ], handler(eventObject) ):可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题。

(2) mousedown与mouseup事件

$ele.mousedown():绑定$ele元素,不带任何参数一般是用来指定触发一个事件。

$ele.mousedown( handler(eventObject) ):绑定$ele元素每次$ele元素触发点击操作会执行回调 handler函数。

$ele.mousedown( [eventData ], handler(eventObject) ): 可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题。

用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3

(3) mousemove事件

用交互操作中,经常需要知道用户是否有移动的操作。基于移动的机制可以做出拖动、拖拽一系列的效果出来。针对移动事件,jQuery提供了一个mousemove的快捷方法可以监听用户移动的的操作

$ele.mousemove()
$ele.mousemove( handler(eventObject) )
$ele.mousemove( [eventData ], handler(eventObject) )

(4) mouseover与mouseout事件

监听用户的移入移出操作,方法同上。

(5) mouseenter与mouseleave事件

监听用户移动到内部的操作,方法同上。

mouseenter事件和mouseover的区别:

关键点就是:冒泡的方式处理问题
mouseover事件会一直往上找父元素上的mouseover事件,如果父元素有mouseover事件就会被触发。
mouseenter事件只会在绑定它的元素上被调用,而不会在后代节点上被触发。

(7) hover事件

$(selector).hover(handlerIn, handlerOut)

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

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

(9) focusout事件

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

2. 表单事件

(1) blur与focus事件

区别:是否支持冒泡处理

focus()在元素本身产生,focusin()在元素包含的元素中产生。

(2) change事件

input元素: 监听value值的变化,当有改变时,失去焦点后触发change事件。对于单选按钮和复选框,当用户用鼠标做出选择时,该事件立即触发。
select元素:对于下拉选择框,当用户用鼠标作出选择时,该事件立即触发。
textarea元素: 多行文本输入框,当有改变时,失去焦点后触发change事件。

(3) select事件

select事件只能用于元素与