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.
stopPropagation()
preventDefault()
4、用指令碼觸發事件處理
trigger(eventType) 由於事件觸發是從代碼產生的,所以沒有Event執行個體,也沒有冒泡
eventName()
blur
click
focus
select
submit
toggle(listenerOdd,listenerEven)
listenerOdd 第1、3……次執行的函數
listenerEven 第2、4……次執行的函數
hover(overListener,outListener)
博文來源:http://www.cnblogs.com/everx/archive/2008/02/21/1076458.html