目錄
- jQuery的事件處理
- 頁面載入事件
- 事件系結
- 反系結
- 一次性事件的系結
- jQuery事件物件
- 滑鼠懸停事件
jQuery的事件處理
頁面載入事件
（1）JavaScript的頁面載入事件：window.onload
（2）jQuery的頁面載入事件（入口函式）：$(function(){ js代碼 })
事件系結
（1）jQuery常用事件方法
（2）語法格式
$(selector).bind('事件型別',function(){
處理代碼
})
或者
$(selector).事件名(function(){
處理代碼
})
例如：
<label>
用戶名：
<input type="text" id="username">
</label>
<br><br>
<label>
密碼：
<input type="password" id="pwd">
</label>
<br><br>
<button type="button" id="btn_submit">提交</button>
<button type="button" id="btn_reset">重置</button>
//為重置按鈕系結事件
$('#btn_reset').bind('click',function(){
$('#username').val('') //將控制元件內的值設定為空
$('#pwd').val('')
})
反系結
如果你想要取消元素上系結的事件，就可以使用反系結的方法，這樣元素就監聽不到相應的事件，
方法：
（1）取消元素上系結的所有事件：$(selector).unbind()
（2）取消元素上系結的指定事件：$(selector).unbind('事件名')
例如：
緊接上面的例子
$('#btn_reset').unbind('click') //取消重置按鈕上系結的點擊事件
這樣一來，重置按鈕就不起作用了，無法重置輸入框里面的內容，
一次性事件的系結
想要一個控制元件或者一個元素只能使用一次，就可以用到一次性事件的系結，
語法格式：
$(selector).one('事件型別'，function(){
處理代碼
})
例如：
緊接上例：
$('#btn_reset').one('click',function(){
$('#username').val('')
$('#pwd').val('')
})
//重置按鈕只能使用一次
jQuery事件物件
當事件被觸發時，就會有事件物件的產生，在事件處理函式中可以使用引數來接收事件物件，
例如：
$('div').bind('click',function(event){
console.log(event)
alert(event.target) //div
console.log(event.pageX+','+event.pageY)
})
其中：
type：事件型別
target：事件物件
pageX、pageY：在滑鼠事件中滑鼠相對于頁面原點（最左上角的點）的x、y坐標
滑鼠懸停事件
語法格式：
$(selector).hover(over,out)
（1）over：回呼函式，表示滑鼠懸停時呼叫的函式
（2）out：回呼函式，表示滑鼠離開時呼叫的函式
例如：
<img src="../images/8.png.jpeg" alt="" width="300" height="200"> //選取一張圖片
$('img').hover(function(event){
$('img').attr('src','../images/9.gif')
console.log(event.type)
},function(event){
$('img').attr('src','../images//8.png.jpeg')
console.log(event.type)
}
)
效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290897.html
標籤：其他