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() 方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行。