jQuery封裝了大量的javascript事件，方便了開發(fā)人員的使用附井。這樣規(guī)范了代碼讨越，使得我們的日常開發(fā)變得簡單而方便，我們只需要了解其基本的操作方法以及實現原理永毅，下面我來給大家介紹一下jQuery的事件是如何使用把跨。
在jQuery中的事件，我簡單分為以下幾種類型：
●事件綁定與取消
√ ?on() - 規(guī)定向被選元素添加的一個或多個事件處理程序沼死。
// 給按鈕綁定事件
// 可以通過群組選擇器選出多個元素着逐，并且可以同時添加事件
// 可以同時給元素綁定多個事件，只需要在on()的第一個參數的位置添加事件類型意蛀，中間使用空格分隔耸别，即可
$('#btn1, #btn2').on('click mouseover mouseout', function (e) {
// 使用on()方式綁定的事件的回調中，內部的this為觸發(fā)該方法的原生DOM對象县钥。
// 如果需要使用秀姐，建議轉為JQ元素，后續(xù)使用JQ方法
var $this = $(this);
$this.html('button');
// 每次函數被調用若贮，都會產生一個事件對象省有，就是函數的參數e，并且JQ已經出了兼容的問題
// 通過e.type就可以獲取事件類型
console.log(e.type);
console.log(e);
});
還有一點需要注意的是：如果給一個人按鈕綁定多個事件的時候谴麦，可以給on（）方法傳遞一個對象蠢沿，方法類型和對應的函數以健值的方式傳入
$('#btn1').on({
'click': function () {
console.log('click');
},
'mouseover': function () {
console.log('mouseover');
}
});
我們會覺得這樣給元素綁定事件在書寫方面有點麻煩，而且代碼量也不少匾效，所以我們有更為簡潔的寫法來進行事件的綁定搏予，代碼如下：
$('#btn1').click(function () {
console.log('click');
});
$('#btn2').mouseout(function () {
console.log('dblclick');
});
√ ?off() - 移除指定元素添加的一個或多個事件處理程序。
$('#btn1, #btn2').off('mouseover mouseout');
√ ?one() - 為被選元素附加一個只執(zhí)行一次的事件處理程序弧轧。 ?
$('#btn3').one('click', function () {
console.log(this);
});
√ ?load() - 當指定的元素（及子元素）已加載時雪侥，會發(fā)生 load() 事件碗殷。
通常我們在寫js代碼時候會在js代碼外面加一個這樣的函數（表示將頁面的文檔加載完之后再執(zhí)行）
$(document).ready(function(){
}); ? ? ? ? ?//或者還有另外一種簡潔的寫法
$(function () {
});
√ ?hover() -復合事件，同時可綁定多個事件速缨，相當于mouseover和mouseout锌妻。
$('li').hover(function(){
$(this).css('background-color','blue');
},function(){
$(this).css('background-color','block');
});
●元素狀態(tài)的變化
blur() - 當元素失去焦點時發(fā)生 blur 事件。
change() - 當元素的值發(fā)生改變時旬牲，會發(fā)生 change 事件仿粹。
click() - 當點擊元素時，會發(fā)生 click 事件原茅。
dblclick() - 當雙擊元素時吭历，會發(fā)生 dblclick 事件。
focus() - 當元素獲得焦點時擂橘，發(fā)生 focus 事件晌区。
●元素外部狀態(tài)
resize() - 當調整瀏覽器窗口的大小時，發(fā)生 resize 事件通贞。
scroll() - 當用戶滾動指定的元素時朗若，會發(fā)生 scroll 事件。
select() - 文本被選擇時昌罩，會發(fā)生 select 事件哭懈。
submit() - 當提交表單時，會發(fā)生 submit 事件茎用。
特殊狀態(tài)觸發(fā)
error() - 當元素遇到錯誤（沒有正確載入）時遣总，發(fā)生 error 事件。
trigger() - 觸發(fā)被選元素的指定事件類型轨功。
triggerHandler() - 觸發(fā)被選元素的指定事件類型彤避。但不會執(zhí)行瀏覽器默認動作，也不會產生事件冒泡夯辖。
●鼠標鍵盤事件
keydown() - 當按鈕被按下時，發(fā)生 keydown 事件董饰。
keypress() - keypress 事件與 keydown 事件類似蒿褂。當按鈕被按下時，會發(fā)生該事件卒暂。它發(fā)生在當前獲得焦點的元素上啄栓。
keyup() - 當按鈕被松開時，發(fā)生 keyup 事件也祠。它發(fā)生在當前獲得焦點的元素上昙楚。
mousedown() - 當鼠標指針移動到元素上方，并按下鼠標按鍵時诈嘿，會發(fā)生 mousedown 事件堪旧。
mouseenter() - 當鼠標指針穿過元素時削葱，會發(fā)生 mouseenter 事件。
mouseleave() - 當鼠標指針離開元素時淳梦，會發(fā)生 mouseleave 事件析砸。
mousemove() - 當鼠標指針在指定的元素中移動時，就會發(fā)生 mousemove 事件爆袍。
mouseout() - 當鼠標指針從元素上移開時首繁，發(fā)生 mouseout 事件。
mouseover() - 當鼠標指針位于元素上方時陨囊，會發(fā)生 mouseover 事件弦疮。
mouseup() - 當在元素上放松鼠標按鈕時，會發(fā)生 mouseup 事件蜘醋。
●介紹完jQuery的一些常用時間后胁塞，我們來看一下jQuery的i事件對象
√ ?事件對象的獲取
$('div').click(function(event){ ? ? //觸發(fā)的函數中的參數，即為事件對象
console.log(event)
});
√? 事件對象的常用屬性
currentTarget ? ? ?實際觸發(fā)事件的對象
delegateTarget ? ? ?代理對象
pageX ? ?相對于文檔的X值
pageY ? ?相對于文檔的Y值
type ? 觸發(fā)方式
target ? ? 觸發(fā)事件的對象
√? 事件的冒泡以及默認行為的處理
stopPropagation（）堂湖； ? 阻止事件冒泡
preventDefault（）闲先； ? ?組織默認的事件
●接下來介紹一下jQuery的高級事件，也就是事件委托无蜂，下面我以一個小案例來為大家介紹
首先在頁面中寫出以下html代碼
設置簡單的樣式
我們要實現的效果是當你任意點擊一個li時伺糠，會在ul的最下方復制出一個你點擊的li
如果用原生js的寫法來實現的話，代碼如下：
/ 獲取所有l(wèi)i
var lis = document.querySelectorAll('li');
var click = function () {
// 創(chuàng)建新li
var newLi = document.createElement('li');
newLi.innerHTML = this.innerHTML;
newLi.onclick = click;
// 拼接
document.querySelector('ul').appendChild(newLi);
};
// 給所有l(wèi)i綁定事件
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = click;
}
接下來我引入jQuery斥季，使用jq來進行實現效果训桶，代碼如下：
$('ul').on('click', 'li', function () { ??
// 使用on()的方式可以快速的添加事件代理（委托）
// 把事件綁定到父元素上面，on()第一個參數為事件類型酣倾，第二個參數為實際觸發(fā)的對象舵揭，第三個參數為回調函數
?// 先將this轉為JQ元素，然后克隆躁锡，然后拼接到ul最后面
$(this).clone().appendTo('ul');
});
jq的事件先介紹到這里午绳，如果對您有所幫助的話，請點贊并關注哦映之，我會不定時的更新一下自己學習的經驗以及見解拦焚，和大家進行交流。
您贊就是是我最大的動力８苁洹Ｊ臧堋！
