1. 程式人生 > >07-jquery事件模型

07-jquery事件模型

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事件模型