jQuery中的事件
2013-11-28 13:52
411 查看
jQuery中的事件
1、浏览器实现的事件模型
DOM Level 0事件处理的实现是将一个handler赋值给元素的属性,如onclick=function(param1, param2){...}。
缺点是一个事件只能有一个处理函数,即最后一个被赋值的处理函数,之前的全部被覆盖
DOM Level 2事件处理的实现是使用方法addEventListener(eventType, listener, useCapture)
eventType是去掉之前元素属性的"on"前缀,即onclick的eventType是click
listener是事件处理函数的引用,第一个参数是event对象
useCapture是指使用捕捉或冒泡方式处理事件,一般为false,即使用冒泡方式
但是IE没有实现DOM Level 2的事件处理模型,不支持捕捉方式,而且使用方法也不同
attachEvent(eventName,handler)
handler没有将event对象作为第一个参数传入,而是使用window.event
2、用JQuery绑定事件处理到元素
bind(eventType,data,listener) 绑定事件到JQuery对象
eventType:事件类型
data:Object类型,用于listener中使用的数据,可省略
listener:处理函数
还可以对事件进行组合,使用namespace的方式
例如:click.myNamespace,这样可以将几个事件处理作为一个单元处理
eventTypeName(listener)
eventTypeName是指:
blur
change
click
dblclick
error
focus
keydown
keypress
keyup
load
mousedown
mousemove
mouseout
mouseover
mouseup
resize
scroll
select
submit
unload
结果返回包装集
one(eventType,data,listener) 只执行一次绑定的函数
unbind(eventType,listener) 若没有参数则所有的listener都被移除
unbind(event)
3、Event对象实例
Event实例属性
altKeySet to true if the Alt key was pressed when the event was triggered, false if not. The Alt key is labeled Option on most Mac keyboards.ctrlKeySet to true if the Ctrl key was pressed when the event was triggered, false if not. data The value, if any, passed as the second parameter to the bind() command when the handler was established.keyCodeFor keyup and keydown events, this returns the key that was pressed. Note that for alphabetic characters, the uppercase version of the letter will be returned, regardless of whether the user typed an uppercase or lowercase letter. For example, both a and
A will return 65. You can use shiftKey to determine which case was entered. For keypress events, use the which property, which is reliable across browsers.metaKeySet to true if the Meta key was pressed when the event was triggered, false if not The Meta key is the Ctrl key on PCs and the Command key on Macs.pageXFor mouse events, specifies the horizontal coordinate of the event relative from the page origin.pageYFor mouse events, specifies the vertical coordinate of the event relative from the page origin.relatedTargetFor some mouse events, identifies the element that the cursor left or entered when the event was triggered.screenXFor mouse events, specifies the horizontal coordinate of the event relative from the screen origin.screenYFor mouse events, specifies the vertical coordinate of the event relative from the screen origin.shiftKeySet to true if the Shift key was pressed when the event was triggered, false if not.targetIdentifies the element for which the event was triggered.typeFor all events, specifies the type of event that was triggered (for example, click). This can be useful if you’re using one event handler function for multiple events.whichFor keyboard events, specifies the numeric code for the key that caused the event, and for mouse events, specifies which button was pressed (1 for left, 2 for middle, 3 for right). This should be used instead of button, which can’t be relied on to function
consistently across browsers.
stopPropagation()
preventDefault()
4、用脚本触发事件处理
trigger(eventType) 由于事件触发是从代码产生的,所以没有Event实例,也没有冒泡
eventName()
blur
click
focus
select
submit
toggle(listenerOdd,listenerEven)
listenerOdd 第1、3……次执行的函数
listenerEven 第2、4……次执行的函数
hover(overListener,outListener)
1、浏览器实现的事件模型
DOM Level 0事件处理的实现是将一个handler赋值给元素的属性,如onclick=function(param1, param2){...}。
缺点是一个事件只能有一个处理函数,即最后一个被赋值的处理函数,之前的全部被覆盖
DOM Level 2事件处理的实现是使用方法addEventListener(eventType, listener, useCapture)
eventType是去掉之前元素属性的"on"前缀,即onclick的eventType是click
listener是事件处理函数的引用,第一个参数是event对象
useCapture是指使用捕捉或冒泡方式处理事件,一般为false,即使用冒泡方式
但是IE没有实现DOM Level 2的事件处理模型,不支持捕捉方式,而且使用方法也不同
attachEvent(eventName,handler)
handler没有将event对象作为第一个参数传入,而是使用window.event
2、用JQuery绑定事件处理到元素
bind(eventType,data,listener) 绑定事件到JQuery对象
eventType:事件类型
data:Object类型,用于listener中使用的数据,可省略
listener:处理函数
还可以对事件进行组合,使用namespace的方式
例如:click.myNamespace,这样可以将几个事件处理作为一个单元处理
eventTypeName(listener)
eventTypeName是指:
blur
change
click
dblclick
error
focus
keydown
keypress
keyup
load
mousedown
mousemove
mouseout
mouseover
mouseup
resize
scroll
select
submit
unload
结果返回包装集
one(eventType,data,listener) 只执行一次绑定的函数
unbind(eventType,listener) 若没有参数则所有的listener都被移除
unbind(event)
3、Event对象实例
Event实例属性
altKeySet to true if the Alt key was pressed when the event was triggered, false if not. The Alt key is labeled Option on most Mac keyboards.ctrlKeySet to true if the Ctrl key was pressed when the event was triggered, false if not. data The value, if any, passed as the second parameter to the bind() command when the handler was established.keyCodeFor keyup and keydown events, this returns the key that was pressed. Note that for alphabetic characters, the uppercase version of the letter will be returned, regardless of whether the user typed an uppercase or lowercase letter. For example, both a and
A will return 65. You can use shiftKey to determine which case was entered. For keypress events, use the which property, which is reliable across browsers.metaKeySet to true if the Meta key was pressed when the event was triggered, false if not The Meta key is the Ctrl key on PCs and the Command key on Macs.pageXFor mouse events, specifies the horizontal coordinate of the event relative from the page origin.pageYFor mouse events, specifies the vertical coordinate of the event relative from the page origin.relatedTargetFor some mouse events, identifies the element that the cursor left or entered when the event was triggered.screenXFor mouse events, specifies the horizontal coordinate of the event relative from the screen origin.screenYFor mouse events, specifies the vertical coordinate of the event relative from the screen origin.shiftKeySet to true if the Shift key was pressed when the event was triggered, false if not.targetIdentifies the element for which the event was triggered.typeFor all events, specifies the type of event that was triggered (for example, click). This can be useful if you’re using one event handler function for multiple events.whichFor keyboard events, specifies the numeric code for the key that caused the event, and for mouse events, specifies which button was pressed (1 for left, 2 for middle, 3 for right). This should be used instead of button, which can’t be relied on to function
consistently across browsers.
stopPropagation()
preventDefault()
4、用脚本触发事件处理
trigger(eventType) 由于事件触发是从代码产生的,所以没有Event实例,也没有冒泡
eventName()
blur
click
focus
select
submit
toggle(listenerOdd,listenerEven)
listenerOdd 第1、3……次执行的函数
listenerEven 第2、4……次执行的函数
hover(overListener,outListener)
相关文章推荐
- jquery 禁止回车事件响应
- jQuery判断点击事件是否在目标区域
- 兼容IE与firefox火狐的回车事件(js与jquery)
- 为啥JQUERY有时候的点击事件封装出错
- jquery移除、绑定、触发元素事件使用示例详解
- jquery bind('click')传参问题(例如:列表中每行绑定一个事件)
- jQuery的事件模式(翻译jQuery in action第四章4)
- jquery学习之-阻止事件冒泡,触发自定义事件
- jquery绑定事件(bind和live的区别)
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
- iOS上的jQuery.on()冒泡事件绑定 以及 iOS绝对定位元素中的输入框
- jQuery事件
- jQuery中的事件
- jQuery 双击事件(dblclick)时,不触发单击事件(click)
- jQuery 全选 全不选 事件绑定的实现代码
- jQuery 事件
- jquery键盘事件
- Jquery之事件(三)
- jQuery代码优化 事件委托篇
- 什么是事件冒泡?如何用jquery/js阻止事件冒泡?阻止冒泡有什么作用?小生来抛个砖。