jQuery事件（重点）

1问：什么是事件？

答：事件是在文档中或者在浏览器窗口中通过某些动作触发。比如，单击，鼠标经过，键盘按下等。事件通常和函数结合使用。

Javascript中的事件在jquery都是可以使用的，只是有一点区别，jQuery简化了javascript事件的操作，绑定事件时，没有on关键字。

我们先看一个默认触发一个单击的案例

jQuery常用事件

（1）click事件：

语法格式：

click(‘数据’，回调函数);

mouseover和mouseenter的应用

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

mouseenter：事件只在鼠标移动到选取的元素上时触发。

focus:当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件

blur:当元素失去焦点时发生 blur 事件。

jQuery bind和unbind事件使用

我们先看一个简单的实例：

bind绑定事件：

1. 添加一个事件
2. 添加多个事件，多个事件之间用空格
3. 添加事件映射（多个事件）
4. 向函数传递数据

语法格式：

$(selector).bind(event,data,function,map)

selector:选择器。

参数解析：

event:可以添加一个或者多个事件。

data:规定传递到函数的参数数据。

function :自定义函数。

map:多个事件函数映射。

取消绑定unbind

jQuery on和off事件使用

自 jQuery 版本 1.7 起，on()方法取代了bind()方法，on() 方法是向被选元素添加事件处理程序的首选方法。

语法：$(selector).on(event,childSelector,data,function,map)

语法格式：

$(selector).on(event,childselector,data,function,map)

selector:选择器。

参数解析：

event:可以添加一个或者多个事件。多个事件有空格分割。

childselector:子选择器。规定只能到子元素的事件处理。

data:规定传递到函数的参数数据。

function :自定义函数。

map:多个事件函数映射。

jQuery delegate事件介绍

语法：$(selector).delegate(childSelector,event,data,function)

selector:选择器。

参数解析：

childselector:子选择器。

event:可以添加一个或者多个事件。多个事件有空格分割。

data:规定传递到函数的参数数据。

function :自定义函数。

jQuery hover合成事件介绍

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

语法：$(selector).hover(inFunction,outFunction)

调用:

$( selector ).hover( handlerIn, handlerOut )

等同以下方式：

$( selector ).mouseover( handlerIn ).mouseout( handlerOut );

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

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

3.7 jQuery change事件介绍

当元素的值改变时发生 change 事件（仅适用于表单字段）。

change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。

event对象的属性

type:事件的类型

target:哪个元素的事件(.nodeName)

which:返回鼠标的按键或者是键盘的按键的值（ascii值）。

pageX:返回鼠标指针的位置，相对于文档的左边缘。

pageY:返回鼠标指针的位置，相对于文档的上边缘。

jQuery事件具体应用实例

（1）事件的默认阻止

event.preventDefault() 方法阻止元素发生默认的行为。

例如：

阻止以下 URL 的链接

方法1：event.preventDefault()

方法2：return false

1. 事件的冒泡

event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。