JQuery学习笔记(三)
2008-02-21 14:21
756 查看
四、事件
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.ctrlKey
Set 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.keyCode For 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.metaKey Set 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.pageX For mouse events, specifies the horizontal coordinate of the event relative
from the page origin.pageY For mouse events, specifies the vertical coordinate of the event relative
from the page origin.relatedTarget For some mouse events, identifies the element that the cursor left or
entered when the event was triggered.screenX For mouse events, specifies the horizontal coordinate of the event relative
from the screen origin.screenY For mouse events, specifies the vertical coordinate of the event relative
from the screen origin.shiftKey Set to true if the Shift key was pressed when the event was triggered, false
if not.target Identifies 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.which For 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.ctrlKey
Set 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.keyCode For 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.metaKey Set 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.pageX For mouse events, specifies the horizontal coordinate of the event relative
from the page origin.pageY For mouse events, specifies the vertical coordinate of the event relative
from the page origin.relatedTarget For some mouse events, identifies the element that the cursor left or
entered when the event was triggered.screenX For mouse events, specifies the horizontal coordinate of the event relative
from the screen origin.screenY For mouse events, specifies the vertical coordinate of the event relative
from the screen origin.shiftKey Set to true if the Shift key was pressed when the event was triggered, false
if not.target Identifies 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.which For 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学习笔记2-1:jquery基本选择器
- jQuery学习笔记之Ajax用法实例详解
- 图片、JQuery学习笔记(图片的展开和伸缩)-by小雨
- jquery 学习笔记3 遍历
- jQuery学习笔记 —— 4. 动画
- jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
- Jquery学习笔记(3):iScroll问题总结
- jQuery学习笔记之选择器
- jQuery学习笔记之三 对Dom的操作
- jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要)
- jquery 学习笔记
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- 前端学习笔记(JQuery+JavaScript)
- jQuery学习笔记之jQuery基础核心
- 锋利的jQuery 学习笔记-第一章 认识JQuery
- JQuery学习笔记(三)——选择器2
- JQuery中attr属性和jQuery.data()学习笔记【必看】
- jQuery源码学习笔记四
- jquery学习笔记----隐藏、显示、切换,滑动,淡入淡出,以及动画