淺談jQuery中的事件

頁面加載

• ready()方法：實現了相似於window.onload事件的功能，可是寫法比較多

1.$(document).ready(function(){});
2.$().ready(function(){});
3.$(function(){});

事件綁定與解綁

• bind(type,data,callback)方法:綁定事件

type:表示綁定的事件名稱(注意:沒有on)
data:做爲event.data屬性傳遞給事件對象的額外數據對象
callback:表示綁定事件的處理函數

$('button').bind('click',function(){});

• unbind(type,data,callback)方法:解綁定事件

type:表示綁定的事件名稱(注意:沒有on)
data:做爲event.data屬性傳遞給事件對象的額外數據對象
callback:表示綁定事件的處理函數
若是隻傳遞事件名稱的話，解綁定事件的全部處理函數
若是傳遞事件名稱和指定的處理函數，解綁定該事件的指定處理函數

$('button').unbind('click',函數名稱);

bind()與unbind()中的data參數
data參數的值，利用event事件對象的data屬性進行接收
該參數的數據內容只能在事件的處理函數中被使用

jQuery中提供多組事件綁定與解綁的方法
1.bind()與unbind()：jQuery 3.0版本後刪除方法
2.on()與off()方法：jQuery 1.7版本後新增方法
其實bind()與unbind()的底層方法就是on()和off()
3.live()與die()：jQuery 1.7版本後刪除方法
實現事件委託
4.delegate()與undelegate()：jQuery 1.6版本後新增方法，jQuery 3.0版本後刪除方法，實現事件委託
5.one()：爲事件綁定一次性的函數

事件切換

鼠標懸停事件：
1.mouseover：表示鼠標懸停在指定元素上
2.mouseout：表示鼠標從指定元素上移開
jQuery提供hover(over,out)方法,它能夠直接實現鼠標懸停和鼠標從元素上移開的功能

$('button').hover(function(){
    $('div').css('display','block');
},function(){
    $('div').css('display','none');
});

事件模擬

trigger():模擬用戶進行觸發事件

$('button').bind('click',function(){
    console.log('this is button');
});
//模擬用戶觸發
$('button').trigger('click');