- 1.事件機(jī)制
jQuery的事件機(jī)制陈轿，指的是：jQuery對(duì)JavaScript操作DOM事件的封裝贮配，包括了：事件綁定掘托、事件解綁茅诱、事件觸發(fā) - JavaScript：
btn.onclick = function() {}; //給按鈕綁定事件
- jQuery：
$btn.click(function() {}); //給按鈕綁定事件
click是一個(gè)方法金句，內(nèi)部是對(duì)onclick事件的封裝
- 2.簡(jiǎn)單的事件
click() 單擊事件
blur() 失去焦點(diǎn)事件
mouseenter() 鼠標(biāo)進(jìn)入事件
mouseleave() 鼠標(biāo)離開事件
dblclick() 雙擊事件
change() 改變事件檩赢，如：文本框值改變，下拉列表值改變等
focus() 獲得焦點(diǎn)事件
keydown() 鍵盤按下事件
mouseover冒泡违寞，mouseenter不冒泡
其他參考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp - 3.事件綁定
- bind()方式
作用：給匹配到的元素直接綁定事件（不推薦贞瞒，1.7以后的jQuery版本被on取代）
// 綁定單擊事件處理程序
第一個(gè)參數(shù)：事件類型
第二個(gè)參數(shù)：事件處理程序
$("p").bind("click mouseenter", function(){
//事件響應(yīng)方法
});
- delegate()方式
優(yōu)勢(shì)：減少事件綁定次數(shù)提高效率，支持動(dòng)態(tài)創(chuàng)建出來的元素綁定事件
// 第一個(gè)參數(shù)：div趁曼，要綁定事件的元素
// 第二個(gè)參數(shù)：事件類型
// 第三個(gè)參數(shù)：事件處理函數(shù)
$("div").delegate("p", "click", function(){
//為 div下面的所有的p標(biāo)簽綁定click事件
});
- on()方式（最現(xiàn)代的方式军浆，強(qiáng)烈建議使用的方式）
1
綁定單個(gè)事件
$('p').on('click',function () {
console.log('xxx');
})
2
綁定多個(gè)事件 -> 同一個(gè)回調(diào)函數(shù)
$('p').on('click mouseenter ',function (event) {
console.log('xxx' + event.type);
})
3
綁定多個(gè)事件 -> 多個(gè)回調(diào)函數(shù)(鍵值對(duì))
鍵: 事件類型
值: 需要執(zhí)行的函數(shù)
$('p').on({
'click': cE,
'mouseenter': function () {
console.log('鼠標(biāo)移入');
}
})
function cE() {
console.log('單機(jī)事件');
}
4
//為 div下面的所有的span標(biāo)簽綁定click事件
$("div").on( "click",“span”, function() {});
- 4.事件解綁
- unbind() 方式
$("div").unbind(); //解綁所有的事件
$("div").unbind(“click”); //解綁指定的事件
- undelegate() 方式
$("div").undelegate(); //解綁所有的delegate事件
$("div").undelegate( “click” ); //解綁所有的click事件
- off解綁on方式綁定的事件
// 解綁匹配元素的所有事件
$("div").off();
// 解綁匹配元素的所有click事件
$("div").off(“click”);
// 解綁所有代理的click事件，元素本身的事件不會(huì)被解綁
$("div").off( “click”, “**” );
事例
$('p').click(function () {
console.log('xxxx');
$('p').off('click');
})
- 5.自動(dòng)觸發(fā)事件
trigger()方法觸發(fā)事件
會(huì)觸發(fā)事件的默認(rèn)行為.
$(':submit').trigger('click');
triggerHandler()方法觸發(fā)事件
不會(huì)觸發(fā)事件的默認(rèn)行為.
$(':submit').triggerHandler('click');
