jQuery的事件处理

1.文档的加载事件

 执行时间

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

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

 多次使用

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

简写形式

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

$().ready(function(){

//编写代码

});

2.绑定事件处理函数

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

参数说明:

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

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

on (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: 表示鼠标刚离开元素边界时要执行的函数。

 

posted @ 2017-09-08 13:18  翱翔的海龟  阅读(248)  评论(0编辑  收藏  举报