IT培訓(xùn)網(wǎng)
IT在線學(xué)習(xí)
今天從事件流,DOM0級(jí)事件綁定,DOM2級(jí)事件綁定,低版本IE事件綁定等方面來學(xué)習(xí)事件。
事件流
當(dāng)你單擊了某個(gè)元素,單擊事件不僅僅發(fā)生在這個(gè)元素上,你也單擊了它的父元素、父元素的父元素、……它的祖先元素,甚至單擊了整個(gè)頁(yè)面。
“事件流”描述的是頁(yè)面上各個(gè)元素接收事件的順序。
我們?yōu)榱嗣枋鍪录膫鞑ロ樞,特意人為?guī)定了兩個(gè)階段:捕獲階段capture pahse、冒泡階段bubbling phase。點(diǎn)擊頁(yè)面上的一個(gè)元素,事件在哪個(gè)階段觸發(fā),這取決于添加事件監(jiān)聽的方法。
DOM0級(jí)事件綁定
DOM分為級(jí)別,DOM0級(jí)、1級(jí)、2級(jí)、3級(jí),是不同的標(biāo)準(zhǔn),標(biāo)準(zhǔn)一直在升級(jí)。
我們之前學(xué)習(xí)的 obj.onclick = function () {} 這種注冊(cè)監(jiān)聽的寫法,就是DOM0級(jí)的事件綁定方法。就是把onclick當(dāng)做屬性添加給了oDiv元素。
通過實(shí)驗(yàn),我們發(fā)現(xiàn),這種事件添加方法,只能監(jiān)聽冒泡過程。事件的捕獲階段,沒有監(jiān)聽成功。
這里需要注意,在IE9、Chrome里面,事件會(huì)冒泡到window對(duì)象,而IE6、7、8僅僅冒泡到document對(duì)象。
另外,用這種方法綁定的監(jiān)聽,this指的是觸發(fā)這個(gè)事件的元素,沒有任何的瀏覽器兼容問題。
DOM0級(jí)還有一種寫法,直接將監(jiān)聽寫在標(biāo)簽里面,工作中不許用:
寫在HTML標(biāo)簽里面代碼耦合性很強(qiáng),三層沒有完全分離,工作中不用的。這種寫法,也是監(jiān)聽冒泡階段。
用DOM0級(jí)添加事件監(jiān)聽,同一個(gè)元素不能有兩個(gè)同樣事件監(jiān)聽,比如:
- box.onclick = function () {
- alert(1);
- }
- box.onclick = function () {
- alert(2);
- }
以JS代碼后出現(xiàn)的為準(zhǔn),它會(huì)覆蓋先寫的函數(shù)。所以點(diǎn)擊box彈出2。
DOM2級(jí)事件綁定
DOM1級(jí)規(guī)范中,沒有對(duì)事件進(jìn)行改動(dòng),所以不再贅述。
DOM2級(jí)做了新的規(guī)范,不用on來綁定監(jiān)聽了,而是使用一個(gè)方法 addEventListener()。它接受三個(gè)參數(shù):什么事件、函數(shù)、是否監(jiān)聽捕獲階段。
第1個(gè)參數(shù):事件名不用寫on,比如:click、mouseover 、mouseout
第2個(gè)參數(shù):函數(shù)可以是匿名函數(shù),也可以是有名函數(shù)
第3個(gè)參數(shù):布爾值,true表示監(jiān)聽捕獲、false表示監(jiān)聽冒泡階段
比如:
- box.addEventListener("click", funciton () {
- alert(1);
- }, true);
第三個(gè)參數(shù)是true,表示監(jiān)聽box的捕獲階段的單擊事件。
addEventListener可以重復(fù)添加相同事件名的事件:我們給box1的綁定了兩個(gè)事件冒泡階段的監(jiān)聽,不會(huì)覆蓋,兩個(gè)監(jiān)聽的函數(shù)都會(huì)執(zhí)行,按照代碼執(zhí)行順序。
- box.addEventListener("click", funciton () {
- alert(1);
- }, true);
- box.addEventListener("click", funciton () {
- alert(2);
- }, true);
先彈出1,然后彈出2。
低版本IE的事件綁定
現(xiàn)在仍有少量的用戶在使用IE8,所以我們把低版本的IE事件綁定說明一下。
IE6、7、8不支持addEventListener()方法,支持 attachEvent() 方法。
- box.attachEvent("onclick", function () {
- alert("click");
- });
attachEvent方法沒有第三個(gè)參數(shù),也就是說,不能選擇監(jiān)聽捕獲、冒泡,只能監(jiān)聽冒泡階段。
第一個(gè)參數(shù),必須寫on,和addEventListener()不一樣;
第二個(gè)參數(shù),就是事件處理函數(shù)
沒有第三個(gè)參數(shù),只能監(jiān)聽冒泡。所以和DOM0事件寫法一樣(比如onclick)。
低版本IE的事件監(jiān)聽attachEvent:事件處理函數(shù)里面的this,不是觸發(fā)事件的這個(gè)元素,而是window對(duì)象!
并且,同一個(gè)事件名的多個(gè)監(jiān)聽,會(huì)反著執(zhí)行:
- box.attachEvent("onclick", function () {
- alert(1);
- });
- box.attachEvent("onclick", function () {
- alert(2);
- });
- box.attachEvent("onclick", function () {
- alert(3);
- });
結(jié)果會(huì)彈出3、2、1。
更多內(nèi)容
>>本文地址:http://hqfphsz.com/zhuanye/2021/70628.html
聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
1 您的年齡
2 您的學(xué)歷
3 您更想做哪個(gè)方向的工作?