jQuery基礎(chǔ)事件篇

一、事件

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');
 })
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末绘迁,一起剝皮案震驚了整個(gè)濱河市合溺,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌缀台,老刑警劉巖棠赛,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異膛腐,居然都是意外死亡睛约,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén)哲身,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)辩涝,“玉大人,你說(shuō)我怎么就攤上這事勘天“蛑担” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵误辑,是天一觀的道長(zhǎng)沧踏。 經(jīng)常有香客問(wèn)我,道長(zhǎng)巾钉,這世上最難降的妖魔是什么翘狱? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮砰苍,結(jié)果婚禮上潦匈,老公的妹妹穿的比我還像新娘阱高。我一直安慰自己,他們只是感情好茬缩,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布赤惊。 她就那樣靜靜地躺著,像睡著了一般凰锡。 火紅的嫁衣襯著肌膚如雪未舟。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,365評(píng)論 1 302
  • 那天掂为,我揣著相機(jī)與錄音裕膀,去河邊找鬼。 笑死勇哗,一個(gè)胖子當(dāng)著我的面吹牛昼扛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播欲诺,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼抄谐,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了扰法?” 一聲冷哼從身側(cè)響起蛹含,我...
    開(kāi)封第一講書(shū)人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎迹恐,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體卧斟,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡殴边,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了珍语。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片锤岸。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖板乙,靈堂內(nèi)的尸體忽然破棺而出是偷,到底是詐尸還是另有隱情,我是刑警寧澤募逞,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布蛋铆,位于F島的核電站,受9級(jí)特大地震影響放接,放射性物質(zhì)發(fā)生泄漏刺啦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一纠脾、第九天 我趴在偏房一處隱蔽的房頂上張望玛瘸。 院中可真熱鬧蜕青,春花似錦、人聲如沸糊渊。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)渺绒。三九已至贺喝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間芒篷,已是汗流浹背搜变。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留针炉,地道東北人挠他。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像篡帕,于是被迫代替她去往敵國(guó)和親殖侵。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 第1章 鼠標(biāo)事件 1-1 jQuery鼠標(biāo)事件之click與dbclick事件 用交互操作中镰烧,最簡(jiǎn)單直接的操作就是...
    mo默22閱讀 1,278評(píng)論 0 6
  • 1拢军、鼠標(biāo)事件 常見(jiàn)的click等事件這里不做詳細(xì)介紹 1、mousemove: 用來(lái)監(jiān)聽(tīng)用戶(hù)移動(dòng)的操作怔鳖,基于移動(dòng)的...
    七_(dá)五閱讀 374評(píng)論 0 0
  • 事件是一種異步編程的實(shí)現(xiàn)方式茉唉,本質(zhì)上是程序各個(gè)組成部分之間的通信。DOM支持大量的事件结执,本節(jié)介紹DOM的事件編程度陆。...
    周花花啊閱讀 593評(píng)論 0 3
  • 總結(jié): 鼠標(biāo)事件 1.click與dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r閱讀 1,605評(píng)論 2 10
  • 一說(shuō)起捐款捐物,首先讓人想到我們身邊的騙局献幔,太多了懂傀,那些騙子利用我們的善意,讓我們不再相信友善蜡感,所以蹬蚁,我先排除大家...
    繭破閱讀 561評(píng)論 0 1