jQuery的事件处理

Posted 2020-10-06

1.文档的加载事件

 执行时间

window.onload方法是在页面中所有的DOM元素（包括元素的所有关联文件）完全加载到浏览器后才执行。

通过$(document).ready()方法注册的事件处理函数，只要DOM元素加载完成就可以执行，不管元素所关联的文件是否加载完成。

 多次使用

Window.onload事件只能添加一个回调函数。原因是javascript的onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数（相当于重新赋值），因此不能在现有的行为上添加新的行为。

简写形式

$(document)可以简写为$()。当$()不带参数时，默认参数就是“document”，因此可以简写为：

$().ready(function(){

//编写代码

});

2.绑定事件处理函数

on(events ,fn) 将一个或多个事件的处理方法绑定到被选择的元素上。on()方法适用于当前或未来的元素，如用脚本创建的新元素。

参数说明:

events:  一个或多个用空格分隔的事件类型

fn: 该事件被触发时执行的函数。

on (events,{data},fn)

参数说明:

events: 一个或多个用空格分隔的事件类型

data: 需要传递的参数，作为event.data的属性值

fn: 该事件被触发时执行的函数。

bind(events ,fn)

参数说明:

events: 一个或多个用空格分隔的事件类型

fn: 该事件被触发时执行的函数。

bind(events,{data},fn) 

 events: 指定绑定的事件名称，多个参数用空格隔开

 data: 作为event.data属性值传递给事件对象的额外数据对象

 fn: 回调函数(事件处理函数)

Off(events, selector, fn)

Off();

events: 想要移除的事件名称

selector: 移除那一个DOM节点的事件(必须和传入的DOM节点一致)

fn: 想要移除的绑定函数

4,模拟事件

trigger(type,data)

type: 指定要模拟的事件名称

data: 传递给事件处理函数的附加参数

5.键盘事件

keydown(Function)

功能描述：给键盘按下事件绑定处理函数。

参数说明：

　　Function: 表示键盘按下时要执行的函数。

.keypress(Function) 

　　功能描述：给键盘被按着不放的事件绑定处理函数。

参数说明：

　　Function: 表示键盘被按着不放时要执行的函数。

 .keyup(Function)

 功能描述：给键盘弹起事件绑定处理函数。

参数说明：

　　Function: 表示键盘弹起时要执行的函数。

6.鼠标事件

.click(Function)

 功能描述：给鼠标单击事件绑定处理函数。

参数说明：

　　Function: 表示鼠标单击要执行的函数。

.dblclick(Function)

 功能描述：给鼠标双击事件绑定处理函数。

参数说明：

　　Function: 表示鼠标双击要执行的函数。

.mousedown(Function)

 功能描述：给鼠标按下的事件绑定处理函数。

参数说明：

　　Function: 表示鼠标按下后要执行的函数。

.mouseup()

 　　功能描述：给鼠标弹起的事件绑定处理函数。

参数说明：

       Function: 表示鼠标弹起后要执行的函数。

.mouseenter()

 功能描述：给鼠标进入事件绑定处理函数。

参数说明：

       Function: 表示鼠标进入元素时要执行的函数。

.mouseover()

        功能描述：给鼠标进入到元素上的事件绑定处理函数。

参数说明：

        Function: 表示鼠标进入到元素上时要执行的函数。

.mouseleave()

 功能描述：给鼠标离开事件绑定处理函数。

参数说明：

         Function: 表示鼠标离开元素时要执行的函数。

.mouseout()

         功能描述：给鼠标离开后的事件绑定处理函数。

参数说明：

         Function: 表示鼠标离开元素后要执行的函数。

.mousemove()

       功能描述：给鼠标在元素上移动的事件绑定处理函数。

参数说明：

       Function: 表示鼠标在元素上移动时要执行的函数。

.hover(inFunction, outFunction)

 功能描述：该事件是mouseenter()和mouseout()方法的简写形式。

参数说明：

      inFunction: 表示鼠标刚进入元素边界时要执行的函数。

      outFunction: 表示鼠标刚离开元素边界时要执行的函数。