07-jQuery中的事件

第七節:JQuery中的事件

1、事件對象的屬性

event.type:獲取事件的類型
event.target:獲取到觸發事件的元素
event.preventDefault方法 阻止默認事件行爲
event.stopPropagation()阻止事件的冒泡
keyCode:只針對於keypress事件,獲取鍵盤鍵數字 按下回車,13
event.pageX / event.pageY 獲取到光標相對於頁面的x座標和y座標
如果沒有jQuery,在IE瀏覽器中用event.x / event.y;在Firefox瀏覽器中用event.pageX / event.pageY。
如果頁面上有滾動條還要加上滾動條的寬度和高度
event.clientX:光標對於瀏覽器窗口的水平座標 瀏覽器
event.clientY:光標對於瀏覽器窗口的垂直座標
event.screenX:光標對於電腦屏幕的水平座標 電腦屏幕
event.screenY:光標對於電腦屏幕的水平座標
event.which 該方法的作用是在鼠標單擊事件中獲取到鼠標的左、中、右鍵,
在鍵盤事件中的按鍵 1代表左鍵 2代表中鍵 3代表右鍵

2、事件冒泡

什麼是冒泡?
在頁面上可以有多個事件,也可以多個元素影響同一個元素
從裏到外
嵌套關係
相同事件
其中的某一父類沒有相同事件時,繼續向上查找

停止事件冒泡
停止事件冒泡可以阻止事件中其他對象的事件處理函數被執行
在jQuery中提供了stopPropagation()方法

阻止默認行爲
網頁中元素有自己的默認行爲,例如:單擊超鏈接後會跳轉、單擊提交後表單會提交,有時需要阻止元素的默認行爲
在jQuery中提供了preventDefault()方法來阻止元素的默認行爲

事件捕獲
事件捕獲和冒泡是相反的過程,事件捕獲是從最頂端往下開始觸發
並非所有的瀏覽器都支持事件捕獲,並且這個缺陷無法通過JavaScript來修復。
jQuery不支持事件捕獲,如需要用事件捕獲,要用原生的JavaScriptbind();

綁定
爲匹配元素綁定處理方法
需要給一個元素添加多個事件 ,事件執行一樣時候
one():只執行一次

頁面載入 ready(fn) 當DOM載入就緒可以綁定一個要執行的函數
事件綁定 blind(type,[data],fn) 爲每個匹配元素的特定事件綁定一個事件處理函數
事件綁定 unblind() 解除綁定
事件綁定 on(events,[,selector[,]data],handler) 在選擇元素上綁定一個或者多個事件處理函數
事件綁定 off() 移除on綁定的事件
事件綁定 delegate(selector,eventType,handler) 爲所有選擇匹配元素附加一個或多個事件處理函數
事件綁定 undelegate() 移除綁定
事件動態 live(type,fn) 對動態生成的元素進行事件綁定
事件動態 die(type,fn) 移除live()綁定的事件
交互事件 hover() 鼠標移入移出
交互事件 toggle(fn1,fn2,[fn3],[fn4]) 每單擊後依次調用函數
交互事件 blur(fn) 觸發每一個匹配元素的blur事件
交互事件 change() 觸發每一個匹配元素的change事件
交互事件 click() 觸發每一個匹配元素的click事件
交互事件 focus() 觸發每一個匹配元素的focus事件
交互事件 submit() 觸發每一個匹配元素的submit事件
鍵盤事件 keydown() 觸發每一個匹配元素的keydown事件
鍵盤事件 keypress() 觸發每一個匹配元素的keypress事件
鍵盤事件 keyup() 觸發每一個匹配元素的keyup事件
鼠標事件 mousedown(fn) 綁定一個處理函數
鼠標事件 mouseenter(fn) 綁定一個處理函數
鍵盤事件 mouseleave(fn) 綁定一個處理函數
鍵盤事件 mouseout(fn) 綁定一個處理函數
鍵盤事件 mouseover(fn) 綁定一個處理函數
窗口操作 resize(fn) 綁定一個處理函數
窗口操作 scroll(fn) 綁定一個處理函數

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章