一、事件
1.1、綁定事件
bind()://為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)凳宙。jQuery 3.0中已棄用此方法
on()//在選擇元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)。
one()//附加一個(gè)事件,只運(yùn)行一次曼尊,然后刪除自己
1.2酬诀、解除事件
unbind()//bind()的反向操作,從每一個(gè)匹配的元素中刪除綁定的事件骆撇。jQuery 3.0中已棄用此方法瞒御,請(qǐng)用 off()代替。
off()//在選擇元素上移除一個(gè)或多個(gè)事件的事件處理函數(shù)
1.3神郊、簡(jiǎn)單事件
blur()//當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā) blur 事件
change()//當(dāng)元素的值發(fā)生改變時(shí)肴裙,會(huì)發(fā)生 change 事件
click()//觸發(fā)點(diǎn)擊事件
dbclick()//雙擊元素時(shí),會(huì)發(fā)生 dblclick 事件
focus()//當(dāng)元素獲得焦點(diǎn)時(shí)涌乳,觸發(fā) focus 事件蜻懦。
$(window).scroll()//當(dāng)瀏覽器窗口滾動(dòng)時(shí),會(huì)發(fā)生 scroll 事件夕晓。
$(window).unload()//在當(dāng)用戶(hù)離開(kāi)頁(yè)面時(shí)宛乃,會(huì)發(fā)生 unload 事件。
1.4蒸辆、復(fù)合事件
hover(fn1,fn2):鼠標(biāo)移入征炼,觸發(fā)fn1;鼠標(biāo)移出觸發(fā)fn2
//例:
$("#div").hover(
function(){
$(this).css("background", '#bbffaa');
},
function(){
$(this).css("background", 'red');
});
二、事件對(duì)象
2.1躬贡、事件對(duì)象的獲取
在事件觸發(fā)的函數(shù)中傳遞event參數(shù)
2.2谆奥、事件對(duì)象的常用屬性
event.type 事件類(lèi)型
event.target 觸發(fā)事件的元素
//target:當(dāng)前點(diǎn)擊的標(biāo)簽
event.currentTarget 事件綁定在哪個(gè)元素上
//currentTarget:保存的是事件綁定的對(duì)象
event.pageX:相對(duì)于文檔的左側(cè)
event.pageY 相對(duì)于文檔的頂部
2.3、事件的冒泡以及默認(rèn)行為的處理
事件冒泡:點(diǎn)擊某個(gè)節(jié)點(diǎn)后拂玻,如果該節(jié)點(diǎn)的父節(jié)點(diǎn)也有點(diǎn)擊事件酸些,則父節(jié)點(diǎn)的點(diǎn)擊事件也會(huì)被觸發(fā)
阻止冒泡:event.stopPropagation()
默認(rèn)行為:一些標(biāo)簽在點(diǎn)擊后會(huì)有自己的行為宰译,如a標(biāo)簽點(diǎn)擊后會(huì)自動(dòng)跳轉(zhuǎn)到指定的鏈接中
阻止默認(rèn)行為觸發(fā):event.preventDefault()
三、高級(jí)事件
3.1擂仍、事件模擬操作(模擬用戶(hù)觸發(fā)了某個(gè)事件)
element.trigger("")
$(document).ready(function(){
$('div').click(function(){
alert('888888888');
});
//鏈?zhǔn)秸Z(yǔ)法 很強(qiáng)勢(shì)
$('div').click(function(){
alert('888888888');
}).click();
//事件模擬 不通過(guò)用戶(hù)觸發(fā)事件 讓事件自己觸發(fā)起來(lái)
$('div').trigger('click');
$('div').triggerHandle('click');
})
3.2囤屹、命名空間
給事件名添加一個(gè)新的名字,使用點(diǎn)分割逢渔。移除事件肋坚,可以通過(guò)新添加進(jìn)去的名字來(lái)移除
$(function(){
//命名空間:我們可以在事件名后給它添加一個(gè)新的名字,使用點(diǎn)分割肃廓。這樣就通過(guò)后綴把相同事件添加的不同方法區(qū)分開(kāi)智厌,方便了事件管理
$('div').on('click.tel',function(){
alert('包小姐:138****8181');
})
$('div').on('click',function(){
$(this).css("background","red");
})
$('div').off('click.tel');
})
3.3、事件委托
事件自身不處理事件盲赊,把處理任務(wù)委托給父元素铣鹏,甚至根元素(document)
/*$(document).ready(function(){
$('ul').on("click",function(e){
alert("觸發(fā)該事件的是!!!"+e.target.textContent);
alert("事件綁定在哪個(gè)元素上"+e.currentTarget.textContent);
})
})*/
//事件委托
$(document).ready(function(){
$('ul').on("click","li",function(e){
alert("觸發(fā)該事件的是!!!"+e.target.textContent);
alert("事件綁定在哪個(gè)元素上"+e.currentTarget.textContent);
});
})
四哀蘑、自定義事件編寫(xiě)
自己定義一個(gè)事件名诚卸,并給這個(gè)事件名添加一個(gè)函數(shù)。
最后使用element.trigger()來(lái)執(zhí)行自定義的事件
$(function(){
//自定義事件不指望引擎觸發(fā)
//鏈?zhǔn)秸Z(yǔ)法不能執(zhí)行
//只能通過(guò)trigger/triggerHandler相關(guān)語(yǔ)法去調(diào)用
$('div').on('helloworld',function(){
alert('23');
})
$('div').triggerHandler('helloworld');
})