jQuery中的Event对象

现在的位置: 首页 > 综合 > 正文

jQuery中的Event对象

2013年08月15日 ⁄ 综合 ⁄ 共 2978字 ⁄ 字号小中大 ⁄ 评论关闭

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实例属性

altKey: Set 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.
type: For 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.