07-jquery事件模型
阿新 • • 發佈:2017-08-01
hover bmi value sim listen del change def bubble
-
jquery事件模型:
-
- dom0級事件模型:
- 阻止冒泡:event.stopPropagation();
- 阻止冒泡:event.cancelBubble = true;
- 只支持一個事件處理函數;
- dom2級事件模型:
- addEventListener(eventType)
- addEventListener(listener)
- addEventListener(useCapture):如果為false,只冒泡不捕獲,如果為true,只捕獲,不冒泡。
- attachEvent(eventName,handler)
- jquery事件模型:
- 提供了統一的時間處理方法
-
- 允許添加多個事件處理函數
- 使用標準的時間名稱(不帶on)
- 事件實例作為事件處理函數的的一個參數
- 標準化事件實例最常用的屬性
- 提供了統一的時間取消和阻止默認行為的方法
- 添加事件處理:
-
- on(eventType [,selector] [,data] handler)
- 統一方法和屬性:
-
- 阻止冒泡:stopPropagation();
- 阻止默認行為:preventDefault();
- 阻止冒泡和默認行為:return false
- 所有支持的事件:
-
- blur
- change
- click
- dblclick
- error
- focus
- focusin
- focusout
- keydown
- keyup
- load
- unload
- mousedown
- mouseenter
- mouseleave
- mouseout
- mouseover
- mouseup
- ready
- resize
- scroll
- select
- submit
- 一次性的事件處理只執行一次:
-
- one(eventType [,selector] [,data],handler)
- 移除事件處理:
-
- off(eventType[,selector][,handler])如果什麽都不傳,會把所有事件處理掉
- 事件實例對象的屬性:
-
- altkey
- bubbles
- button
- cancelable
- charCode
- clientX
- clientY
- ctrlKey
- currentTarget
- data
- datail
- delegateTarget
- eventPhase
- metaKey(有瀏覽器兼容問題)
- namespace
- offsetX
- offsetY
- originalTarget
- originalEvent
- pageY(有瀏覽器兼容問題)
- pageX(有瀏覽器兼容問題)
- prevValue
- relatedTarget(有瀏覽器兼容問題)
- result
- screenX
- screenY
- shiftKey
- target(有瀏覽器兼容問題)
- timeStamp
- type
- view
- which(有瀏覽器兼容問題)
- 事件實例對象的方法:
-
- preventDefault():阻止一些瀏覽器的默認事件
- stopPropagetion():阻止了冒泡行為
- stopImmediatePropagation():立刻阻止後續事件處理函數並防止事件冒泡
- isDefaultPrevented()
- isPropagetionStopped()
- isImmediatePropagetionStoppend()
- 後面三種是對前面方法是否調用進行檢測的函數,如果已經調用會返回true
- 觸發事件:
-
- trigger(eventType[,data]) :主動觸發事件
- triggerHandler(eventType[,data])
- triggerHandler相比trigger:不會觸發瀏覽器默認事件,不會產生事件冒泡,只觸發jquery對象集合中第一個元素的時間處理函數,返回的是事件處理函數的返回值,而不是jquery對象
- 快捷方法:
-
- 如果帶有事件處理函數就是添加時間,如果不帶的話就是觸發:
- blur
- change
- click
- dblclick
- focus
- focusin
- focusout
- keydown
- keypress
- keyup
- mousedown
- mouseenter
- mouseleave
- mousemove
- mouseout
- mouseover
- mouseup
- ready
- resize
- scroll
- select
- submit
- 快捷方法的使用:
-
- eventName([data,] handler)
- eventName():如果不添加時間函數就是觸發
- hover方法:彌補onmouseover()onmouseout()方法的不足
- 自定義事件:
-
- on(customEvent)
- trigger(customEvent)
- 事件命名空間:
-
- eventName.namespace
07-jquery事件模型