jQuery事件模型
jQuery事件模型体现如下特征:
1、统一了事件处理中的各种方法
2、允许在每个元素上为每个事件类型建立多个处理程序
3、采用2级事件模型中标准的事件类型名称
4、统一了Event对象的传递方法,并对Event对象的常用属性和方法进行规范
5、为事件管理和操作提供统一的方法。
1、绑定事件:使用bind()绑定
jQuery定义了bind()方法作为统一的接口,用来为每一个匹配元素绑定事件处理程序。
基本语法:
bind(type,[data],fn)
type:表示事件类型
data:可选参数,可以作为event.data属性值传递给事件对象的额外数据对象
fn:表示事件处理函数
如:
$("p").bind("click",{a:"A",b:"B"},function(event)
{
$(this).text(event.data+event.data.b);
}
);
注:在事件处理函数中可以通过event对象的data属性来访问data这个对象,进而访问该对象包含的数据
如果想取消元素特定事件类型的默认的行为,又想阻止事件起泡,可以设置事件处理函数返回的返回值为false。
也
使用event调用这两个函数。
2、绑定事件:快速绑定
除了bind()方法外,jQuery还定义了20个快捷方法为特定的事件类型绑定事件处理程序,这些方法与2级事件模型中的事件类型一一对应,名称完全相同。
绑定特定事件类型的方法
blur() focus() mousedown() resize()
change() keydonw() mousemove() scroll()
click() keypress() mouseout() select()
dbclick() keyup() mouseover() submit()
error() load() mouseup() unload()
可以直接使用快捷方法进行绑定,但是无法向event.data属性传递额外的数据。
如:
$("p").click(function()
{
alert("this is a test");
});
3、绑定事件:使用one()绑定
one()方法是bind()方法的一个特例,由它绑定的事件在执行一次响应之后就会失效。它的用法与bind()完全相同
。
4、注销事件
jQuery定义了unbind()方法,与bind()方法是反向操作,能够从每一个元素中删除绑定的事件。
如果没有指定参数,则删除所有绑定的事件,包括使用bind()方法注册的自定义事件
5、Event对象
当使用bind() 、one()或者其他快捷方法注册事件时,Event对象实例将作为第一个参数传递给事件处理函数
,这与二级事件模型是完全相同的,但是jQuery统一了IE事件模型和二级事件模型中Event对象属性和方法的
用法,使其完全符合DOM标准事件模型的规范。
下面是jQuery的Event对象可以完全使用的属性和方法
type
target
relatedTarget
altKey
ctrlKey
shiftKey
metaKey
which
which
pageX
pageY
screenX
screenY
data
preventDefault()
stopPropagation()
6、事件触发
jQuery定义在脚本控制下自动触发事件处理函数的一系列方法,其中最常用的是 trigger()方法
语法如下:
trigger(type,[data])
其中参数type表示事件类型,以字符串形式传递,第二个参数data是可选参数,利用该参数
可以向调用的事件处理函数传递额外的数据。
triggerHandler()方法对trigger()方法进行补充,该方法的行为表现与trigger()方法类似
,用法也相同,但是存在以下3个主要区别:
triggerHandler()方法不会触发浏览器默认事件
triggerHandler()方法只触发jQuery对象集合中第一个元素的事件处理函数
triggerHandler()方法返回的是事件处理函数的返回值,而不是jQuery对象,如果最开始的
jQuery对象集合为空,则这个方法返回undefined。
除了trigger()和triggerHandler()方法外,jQuery还为大部分事件类型提供了快捷触发的方法。
blur() dbclick() keydown() select()
change() error() keypress() submit()
click() focus() keyup()
如:
$("p").click();
7、1 事件切换:使用toggle()
jQuery定义了两个事件切换的合成方法:hover()和toggle()。
toggel()方法能够为click事件类型绑定两个或者多个事件处理函数,并确保每次单击后依次
调用不同的函数。
7、2 事件切换:使用hover()
hover()方法可以模仿悬停事件,即鼠标指针移动到一个对象上面及移出这个对象触发的事件函数。
hover()方法包含两个参数,其中第一个是移动到这个对象上触发的函数,第二个是移出对象触发的事件函数。
注:mouseout()事件存在一个很严重的错误,如果鼠标指针移到当前元素包含的子元素上时,将会触发当前元素
的mouseout和mouseover事件。
8、事件委派
委派是一种引用方法的类型。
jQuery新添加的委派方法 live() 该方法能够给所有当前以及将来匹配的元素绑定一个事件处理函数,也能绑定自定义事件
,live()的用法与bind()的用法相同。
注:live()一次只能绑定一个事件,但是bind()可以一次绑定多个事件。
如果要移除live()绑定的事件,可以用die()方法实现。
9、事件命名空间
jQuery支持事件命名空间,以方便事件管理。
所谓事件命名空间,就是在事件类型后面以点语法附加一个别名,以便于引用事件。
比如 click.a 其中a就是click当前事件类型的别名,即事件命名空间。
在后面可以通过 .a来引用这个事件。
注:如果在trigger()方法中,事件类型后面附加感叹号,则表示触发不包含命名空间的特定事件类型。
10、绑定多个事件
方法一:对于同一个对象绑定的多个事件,可以以连写的形式串在一起。
比如
$("div").bind("click",function()
{
..
}).bind("click",function()
{
..
})
方法二:使用jQuery定义的bind()方法,可以为元素一次绑定多个事件类型。
如:$("div").bind("mouseover mouseout",function()
{
...
})
11、自定义事件
jQuery支持自定义事件,所有自定义事件都可以通过trigger()方法触发。
如:你使用bind()绑定了一个不存在的新的事件类型,那么你可以在别的已经存在的事件类型中使用trigger()方法触发。
jQuery事件模型体现如下特征:
1、统一了事件处理中的各种方法
2、允许在每个元素上为每个事件类型建立多个处理程序
3、采用2级事件模型中标准的事件类型名称
4、统一了Event对象的传递方法,并对Event对象的常用属性和方法进行规范
5、为事件管理和操作提供统一的方法。
1、绑定事件:使用bind()绑定
jQuery定义了bind()方法作为统一的接口,用来为每一个匹配元素绑定事件处理程序。
基本语法:
bind(type,[data],fn)
type:表示事件类型
data:可选参数,可以作为event.data属性值传递给事件对象的额外数据对象
fn:表示事件处理函数
如:
$("p").bind("click",{a:"A",b:"B"},function(event)
{
$(this).text(event.data+event.data.b);
}
);
注:在事件处理函数中可以通过event对象的data属性来访问data这个对象,进而访问该对象包含的数据
如果想取消元素特定事件类型的默认的行为,又想阻止事件起泡,可以设置事件处理函数返回的返回值为false。
也
使用event调用这两个函数。
2、绑定事件:快速绑定
除了bind()方法外,jQuery还定义了20个快捷方法为特定的事件类型绑定事件处理程序,这些方法与2级事件模型中的事件类型一一对应,名称完全相同。
绑定特定事件类型的方法
blur() focus() mousedown() resize()
change() keydonw() mousemove() scroll()
click() keypress() mouseout() select()
dbclick() keyup() mouseover() submit()
error() load() mouseup() unload()
可以直接使用快捷方法进行绑定,但是无法向event.data属性传递额外的数据。
如:
$("p").click(function()
{
alert("this is a test");
});
3、绑定事件:使用one()绑定
one()方法是bind()方法的一个特例,由它绑定的事件在执行一次响应之后就会失效。它的用法与bind()完全相同
。
4、注销事件
jQuery定义了unbind()方法,与bind()方法是反向操作,能够从每一个元素中删除绑定的事件。
如果没有指定参数,则删除所有绑定的事件,包括使用bind()方法注册的自定义事件
5、Event对象
当使用bind() 、one()或者其他快捷方法注册事件时,Event对象实例将作为第一个参数传递给事件处理函数
,这与二级事件模型是完全相同的,但是jQuery统一了IE事件模型和二级事件模型中Event对象属性和方法的
用法,使其完全符合DOM标准事件模型的规范。
下面是jQuery的Event对象可以完全使用的属性和方法
type
target
relatedTarget
altKey
ctrlKey
shiftKey
metaKey
which
which
pageX
pageY
screenX
screenY
data
preventDefault()
stopPropagation()
6、事件触发
jQuery定义在脚本控制下自动触发事件处理函数的一系列方法,其中最常用的是 trigger()方法
语法如下:
trigger(type,[data])
其中参数type表示事件类型,以字符串形式传递,第二个参数data是可选参数,利用该参数
可以向调用的事件处理函数传递额外的数据。
triggerHandler()方法对trigger()方法进行补充,该方法的行为表现与trigger()方法类似
,用法也相同,但是存在以下3个主要区别:
triggerHandler()方法不会触发浏览器默认事件
triggerHandler()方法只触发jQuery对象集合中第一个元素的事件处理函数
triggerHandler()方法返回的是事件处理函数的返回值,而不是jQuery对象,如果最开始的
jQuery对象集合为空,则这个方法返回undefined。
除了trigger()和triggerHandler()方法外,jQuery还为大部分事件类型提供了快捷触发的方法。
blur() dbclick() keydown() select()
change() error() keypress() submit()
click() focus() keyup()
如:
$("p").click();
7、1 事件切换:使用toggle()
jQuery定义了两个事件切换的合成方法:hover()和toggle()。
toggel()方法能够为click事件类型绑定两个或者多个事件处理函数,并确保每次单击后依次
调用不同的函数。
7、2 事件切换:使用hover()
hover()方法可以模仿悬停事件,即鼠标指针移动到一个对象上面及移出这个对象触发的事件函数。
hover()方法包含两个参数,其中第一个是移动到这个对象上触发的函数,第二个是移出对象触发的事件函数。
注:mouseout()事件存在一个很严重的错误,如果鼠标指针移到当前元素包含的子元素上时,将会触发当前元素
的mouseout和mouseover事件。
8、事件委派
委派是一种引用方法的类型。
jQuery新添加的委派方法 live() 该方法能够给所有当前以及将来匹配的元素绑定一个事件处理函数,也能绑定自定义事件
,live()的用法与bind()的用法相同。
注:live()一次只能绑定一个事件,但是bind()可以一次绑定多个事件。
如果要移除live()绑定的事件,可以用die()方法实现。
9、事件命名空间
jQuery支持事件命名空间,以方便事件管理。
所谓事件命名空间,就是在事件类型后面以点语法附加一个别名,以便于引用事件。
比如 click.a 其中a就是click当前事件类型的别名,即事件命名空间。
在后面可以通过 .a来引用这个事件。
注:如果在trigger()方法中,事件类型后面附加感叹号,则表示触发不包含命名空间的特定事件类型。
10、绑定多个事件
方法一:对于同一个对象绑定的多个事件,可以以连写的形式串在一起。
比如
$("div").bind("click",function()
{
..
}).bind("click",function()
{
..
})
方法二:使用jQuery定义的bind()方法,可以为元素一次绑定多个事件类型。
如:$("div").bind("mouseover mouseout",function()
{
...
})
11、自定义事件
jQuery支持自定义事件,所有自定义事件都可以通过trigger()方法触发。
如:你使用bind()绑定了一个不存在的新的事件类型,那么你可以在别的已经存在的事件类型中使用trigger()方法触发。