【jQuery学习笔记----jQuery事件模型】

jQuery事件模型

为了能够更好地兼容不同类型的浏览器，jQuery在javascript的基础上，进一步封装了不同类型的事件模型，从而开成了一种功能更强大、用法更优雅的jQuery事件模型。特征：

1. l  统一了事件处理中的各种方法。
2. l  允许在每个元素上为每个事件类型建立多个处理程序
3. l  采用2级事件模型中标准的事件类型名称
4. l  统一了Event对象的传递方法，并对Event对象的常用属性和方法进行规范
5. l  为事件管理和操作提供统一的方法。

考虑到IE浏览器不支持事件流中不支持捕获型阶段，且开发者很少用此阶段，所以jQueryg事件模型也没有支持事件流中的捕获型阶段。除了这一点区别外，jQuery事件模型的功能与2级事件模型基本相似。

1.   .bind()

•  .bind( eventType [, eventData ],handler(eventObject) )
•  .bind( eventType [, eventData ] [,preventBubble ] )
•  .bind( eventType [, eventData ] [,preventBubble ] )

•  在1.7版本之后，更流行使用on()方法来绑定文档中的事件处理程序。在早期版本中，bind()方法被用来直接把事件处理程序与元素进行绑定。处理程序被绑定到当前被选种元素的jQuery object上，所以这些元素在调用.bind()方法时必须是存在的。

1.   .delegate()

•  .delegate( selector, eventType,handler(eventObject) )
•  .delegate( selector, eventType, eventData,handler(eventObject) )
•  .delegate( selector, events )
• u 在1.7之后，这个方法已经被on()方法取代，但并没有删除该方法，在早期版本中还可以使用它来做事件代理

1.  .die()  1.7以后不建议使用或删除

• u 用于删除元素上用live()注册的事件处理程序

如 $(“p”).die();

$(“p).die(“click”);

1. l  .jQuery.proxy() 可以参见Utilities

• u 返回一个新的函数，用来指定其上下文
• u jQuery.proxy( function, context )
• u jQuery.proxy( context, name/*String 函数名*/ )
• u jQuery.proxy( function, context [,additionalArguments ] )
• u 该方法主要用来为元素绑定事件处理程序并为其指定不同的对象为处理程序的上下文。另外，jQuery会确保通过jQuery.proxy()绑定的程序，在解绑时是你初始化时指定的程序。注意，jQuery事件绑定子系统会给每一个事件处理程序分配一个唯一的id，目的就是为了在解绑定时能够定位到它。jQuery.proxy()在事件处理子系统中被看做是一个单独的功能，当它绑定不同的上下文时，为了避免解绑错误的处理程序，使用唯一的事件名称空间绑定和解绑定（哪”click.myproxy1）

1. l  .live()1.7以后不建议使用或删除

• u 绑定事件处理程序到所指定的元素上（这个元素可以存在或将来会存在）即动态绑定。

1. l  .off()

• u off( events [, selector ] [,handler(eventObject) ] )
• u off( events [, selector ] )
• u .off()
• u 移除通过on()绑定的事件处理程序。当无参数调用时，将会移除所有绑定在该元素上的事件处理程序。

1. l  .on()

• u .on( events [, selector ] [, data ],handler(eventObject) )
• u .on( events [, selector ] [, data ] )
• u 绑定的事件处理程序到当前选择的一组jQuery对象上。1.7之后，on提供了所有绑定事件处理程序的功能。
• u 任何事件名称都可以被用做events的参数，jQuery会将其转换为浏览器标准的javascript事件类型，当浏览器产生用户动作如 click时会调用事件处理函数。
• trigger()方法可以触发标准流览器事件名和自定义事件名来调用处理程序。事件名只能含数字、下划线、和字符。

1. l  .one()

• u 绑定一个事件处理程序到一个元素的一个事件上，该处理程序最多在一个元素的一个事件上执行一次
• u .one( events [, data ],handler(eventObject) )
• u .one( events [, selector ] [, data ],handler(eventObject) )
• u .one( events [, selector ] [, data ] )

1. l  .trigger()

• u 在匹配元素的指定事件类型上，执行所有的处理程序和行为
• u .trigger( eventType [, extraParameters ] ).triggerHandler()
• u .trigger( event [, extraParameters ] )

1. l  .unbind()

• u 删除bind绑定的事件处理程序
• u 对应on()和off()

1. l  .undelegate()

• u 用来删除使用 delegate()绑定的处理程序
• u 对应 on() 和off()

如果既想取消元素特定事件类型默认的行为，又想阻止事件冒泡，设置处理程序函数返回false即可。

取消默认行为：event.preventDefault()

阻止冒泡：evnet.stopPropagation()

快速绑定事件

除了上面提到的绑定事件外，jquery还定义了20多个快捷方法为特定的事件类型绑定事件处理程序，这些方法与2级事件模型中的事件类型一一对应，名称完全相同

blur()

change()

click()

dbclick()

error()

focus()

keydown()

keypress()

keyup()

load()

mousedown()

mousemove()

mouseout()

mouseover()

mouseup()

resize()

scroll()

select()

unload()

jQuery事件对象属性和方法

type	获取事件的类型。返回值为事件类型的名称，该名称与注册事件处理函数时使用的名称相同
target	发生事件的节点。一般利用该属性来获取当前被激活事件的具体对象
relateTarget	引用与事件的目标节点相关的节点。对于mouseover事件来说，它是鼠标移到目标上时所离开的那个节点；对于mouseout事件来说是，它离开目标时鼠标将要进入的那个节点。
altKey	是否按下alt 键
ctrlKey	是否按下ctrl键
shiftKey	是否按下shift键
metaKey	是否按下meta 键
which	当在mousedown/mouseup/click事件进，显示鼠标键的状态，1：左键 2：中键3：右键
which	当声明keydown和keypress事件时，显示触发的键盘键的数字编码。
pageX	相对于页面原点的水平坐标
pageY	相对于页面原点的垂直坐标
screenX	光标相对于屏幕原点的水平坐标
screenY	光标相对于屏幕原点的垂直坐标
data	存储事件处理函数第二个参数所传递的额外数据
preventDefault()	阻止默认动作
stopPropagation()	阻止冒泡

 

trigger()和triggerHandler()方法

triggerHandler()方法对trigger()方法进行补充，该方法行为表现与trigger()方法类似，用法也相同，但存在三个主要区别

triggerHandler()方法不会触发浏览器默认事件

triggerHandler()方法只触发jQuery对象集合中第一个元素的事件处理程序

triggerHandler()方法返回的是事件处理函数的返回值，而不是jQuery对象。如果最开始的jQuery对象集合为空，则这个方法返回undefined。

 

jQuery事件切换

1、   toggle()切换

可以包含多个函数，会按次序依次执行，如点一次执行第一个函数，点第二次，执行第二个函数。

2、   hover()切换

<div>

   <span></span>

</div>

原生mouseover和mouseout事件处理程序会存在这样的问题，当鼠标进入div元素将会触发mouseover事件，而当鼠标到span元素上时，虽然鼠标并没离开div元素，但是将会触发mouseout和mouseover事件。如果鼠标在div元素内部移动，就可能会不断触发mouseout和mouseover事件，产生不断闪烁的事件触发现象。因为jQuery的mouseout和mouseover事件是对原生的简单封装，所以也存在 这个问题。

hover()修正这个错误，它会对鼠标是否仍然处在特定元素中进行检测，如果是，断续保持悬念，而不触发移动事件。