第1章 DOM事件模型
DOM 0級 事件模型
- <input type="button" onclick="doSomething()" />
- input.onclick = function() { ... }
- event = event || window.event;
- var target = event.target || event.srcElement;
DOM 2級 事件模型
- addEventListener(eventType, listener, useCapture)
- attachEvent(eventName, handler)
第2章 jQuery 事件的操作
jQuery事件模型
- 提供了統(tǒng)一的事件處理方法
- 允許添加多個事件處理函數(shù)
- 使用標準的事件名稱（不帶on）
- 事件實例做為事件處理函數(shù)的第一個參數(shù)
- 標準化事件實例最常用的屬性
- 提供了統(tǒng)一的事件取消和阻止默認行為的方法
添加事件處理
on(eventType[,selector][,data],handler)
bind()咏瑟、delegate()厢洞、live()
統(tǒng)一方法和屬性
阻止冒泡： stopPropagation()
阻止默認行為：preventDefault()
阻止冒泡和默認行為：return false
所有支持的事件
? blur
? change
? click
? dblclick
? error
? focus
? focusin
? focusout
? keydown
? keypress
? keyup
? load
? unload
所有支持的事件
? mousedown
? mouseenter
? mouseleave
? mousemove
? mouseout
? mouseover
? mouseup
? ready
? resize
? scroll
? select
? submit
一次性的事件處理
? one(eventType[,selector][,data],handler)
移除事件處理
? off(eventType[,selector][,handler])
? off()
事件實例對象
事件實例對象的屬性
altKey bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail delegateTarget eventPhase metaKey namespace offsetX offsetY
事件實例對象的屬性
originalTarget originalEvent pageX pageY prevValue relatedTarget result screenX screenY shiftKey target timeStamp type view which
事件實例對象的方法
? preventDefault()
? stopPropagation()
? stopImmediatePropagation()
? isDefaultPrevented()
? isPropagationStopped()
? isImmediatePropagationStopped()
觸發(fā)事件
? trigger(eventType[,data])
? triggerHandler(eventType[,data])
區(qū)別
? triggerHandler 相比 trigger：
? 不會觸發(fā)瀏覽器默認事件耕肩；
? 不會產生事件冒泡；
? 只觸發(fā)jQuery對象集合中第一個元素的事件處理函數(shù)董朝；
? 返回的是事件處理函數(shù)的返回值，而不是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方法
? hover(enterHandler,leaveHandler)
? hover(handler)
自定義事件
? on(customEvent)
? trigger(customEvent)
事件命名空間
? eventName.namespace
