成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

# Javascript # DOM2兼容處理

fnngj / 435人閱讀

摘要：兼容問(wèn)題，除了語(yǔ)法上的區(qū)別，在處理的機(jī)制上也有下列問(wèn)題順序問(wèn)題，重復(fù)問(wèn)題，對(duì)象問(wèn)題。沒有進(jìn)行去重處理。在標(biāo)準(zhǔn)瀏覽器中在低版本中究其根本，都是低版本瀏覽器對(duì)于它內(nèi)置事件池處理機(jī)制的不完善導(dǎo)致的。

DOM2兼容問(wèn)題，除了語(yǔ)法上的區(qū)別，在處理的機(jī)制上也有下列問(wèn)題：順序問(wèn)題，重復(fù)問(wèn)題，this對(duì)象問(wèn)題。

語(yǔ)法問(wèn)題

[標(biāo)準(zhǔn)]
curEle.addEventListener("type", fn, false);
[IE6~8]
curEle.attachEvent("ontype", fn)

var on = function (curEle, type, fn) {
  if (document.addEventListener) {
    //標(biāo)準(zhǔn)瀏覽器
    curEle.addEventListener(type, fn, false);
    return;
  }
  // IE6~8
  curEle.attachEvent("on" + type, fn);
}


var off = function (curEle, type, fn) {
  if (document.removeEventListener) {
    //標(biāo)準(zhǔn)瀏覽器
    curEle.removeEventListener(type, fn, false);
    return;
  }
  // IE6~8
  curEle.detachEvent("on" + type, fn);
};
順序問(wèn)題

當(dāng)事件行為觸發(fā)，執(zhí)行對(duì)應(yīng)事件池中存放的方法時(shí)，IE低版本瀏覽器執(zhí)行方法順序是亂序的，而標(biāo)準(zhǔn)瀏覽器是按照綁定的先后順序依次執(zhí)行的。

var fn1 = function (e) {
      console.log(1);
    }
    var fn2 = function (e) {
      console.log(2);
    }
    var fn3 = function (e) {
      console.log(3);
    }
    var fn4 = function (e) {
      console.log(4);
    }
    on(document.body, "click", fn1);
    on(document.body, "click", fn2);
    on(document.body, "click", fn3);
    on(document.body, "click", fn4);

標(biāo)準(zhǔn)瀏覽器中輸出結(jié)果是： 1 2 3 4
IE6~8瀏覽器中輸出結(jié)果是：4 3 2 1
如果添加更多個(gè)事件，你會(huì)發(fā)現(xiàn)他們是亂序的。

重復(fù)問(wèn)題

IE低版本瀏覽器在向事件池中增加方法的時(shí)候沒有去重機(jī)制，那怕當(dāng)前方法已經(jīng)存放過(guò)了，還會(huì)重復(fù)的添加進(jìn)去，而標(biāo)準(zhǔn)瀏覽器的事件池機(jī)制很完善，可以自動(dòng)去重（事件池中已經(jīng)存在的方法，不允許在添加進(jìn)來(lái)）。

 on(document.body, "click", fn8);
 on(document.body, "click", fn8);
 on(document.body, "click", fn8);

IE低版本瀏覽器中，會(huì)執(zhí)行fn8 3次。沒有進(jìn)行去重處理。但是在標(biāo)準(zhǔn)瀏覽器中只會(huì)輸出一次。

THIS問(wèn)題

IE低版本瀏覽器中，當(dāng)事件行為觸發(fā)，把事件池中方法執(zhí)行，此時(shí)方法中的this指向window，而標(biāo)準(zhǔn)瀏覽器中，this指向當(dāng)前元素本身。

var fn1 = function (e) { console.log(1, this); }
on(document.body, "click", fn1);

在標(biāo)準(zhǔn)瀏覽器中 this--> body
在IE低版本中 this--> window

究其根本，都是IE低版本瀏覽器對(duì)于它內(nèi)置事件池處理機(jī)制的不完善導(dǎo)致的。

DOM2事件綁定兼容處理的原理：告別低版本的IE6~8的內(nèi)置事件池，而是自己創(chuàng)建一個(gè)類似于標(biāo)準(zhǔn)瀏覽器的“自定義事件池”，標(biāo)準(zhǔn)瀏覽器不需要處理兼容，只有IE6~8中才需要處理兼容。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104520.html

相關(guān)文章

  • #JavaScript # javascript DOM0和DOM2事件

    摘要：端的是點(diǎn)擊，但是移動(dòng)端把事件當(dāng)作單擊。移動(dòng)端的是點(diǎn)擊事件不是端的點(diǎn)擊效果，存在的延遲，項(xiàng)目中我們需要解決這個(gè)延遲，使用手指離開處理點(diǎn)擊事件。 什么是事件 事件是元素天生具備的行為方式（和寫不寫JS代碼沒有關(guān)系），當(dāng)我們?nèi)ゲ僮髟氐臅r(shí)候會(huì)觸發(fā)元素 的很多事件。 事件綁定 1.什么是事件綁定給當(dāng)前元素的某一個(gè)事件綁定方法，目的是為了讓當(dāng)前元素某個(gè)事件被觸發(fā)時(shí)，可以做一些事情。2.事件綁定方...

    Salamander 評(píng)論0 收藏0

  • JavaScript中幾個(gè)重要的知識(shí)點(diǎn)（2） ---- DOM事件

    摘要：使用來(lái)移除事件，參數(shù)必須與要移除的事件處理函數(shù)地址指針相同。在低版本瀏覽器中，綁定級(jí)事件的方法為中的級(jí)事件的事件處理程序都是在冒泡階段執(zhí)行的。 JavaScript中幾個(gè)最重要的大知識(shí)點(diǎn) 面向?qū)ο?DOM事件 異步交互ajax 事件 事件就是文檔和瀏覽器的瞬間交互行為 1.事件類型 點(diǎn)擊: click 滾輪: scroll 滑動(dòng): move 進(jìn)入: enter 加載: load ...

    dantezhao 評(píng)論0 收藏0

  • Event Handler 事件處理程序 1 ---《高程3》

    摘要：為屬性賦值匿名函數(shù)事件作用域使用級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法。最后這個(gè)布爾值參數(shù)如果是，表示在捕獲階段調(diào)用事件處理程序如果是，表示在冒泡階段調(diào)用事件處理程序。 事件捕獲和事件冒泡 DOM2級(jí)事件規(guī)定的事件流包括三個(gè)階段：事件捕獲、處于目標(biāo)階段和事件冒泡。首先發(fā)生的是事件捕獲，從外部節(jié)點(diǎn)到內(nèi)部節(jié)點(diǎn)依次遍歷，為截獲事件提供了機(jī)會(huì)。然后是實(shí)際的目標(biāo)接收到事件。最后一個(gè)階段是冒泡...

    WalkerXu 評(píng)論0 收藏0

  • Event Handler 事件處理程序 1 ---《高程3》

    摘要：為屬性賦值匿名函數(shù)事件作用域使用級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法。最后這個(gè)布爾值參數(shù)如果是，表示在捕獲階段調(diào)用事件處理程序如果是，表示在冒泡階段調(diào)用事件處理程序。 事件捕獲和事件冒泡 DOM2級(jí)事件規(guī)定的事件流包括三個(gè)階段：事件捕獲、處于目標(biāo)階段和事件冒泡。首先發(fā)生的是事件捕獲，從外部節(jié)點(diǎn)到內(nèi)部節(jié)點(diǎn)依次遍歷，為截獲事件提供了機(jī)會(huì)。然后是實(shí)際的目標(biāo)接收到事件。最后一個(gè)階段是冒泡...

    wujl596 評(píng)論0 收藏0

  • 前端小知識(shí)--JavaScript事件流

    摘要：事件事件指可以被偵測(cè)到的行為。事件通常與函數(shù)配合使用，當(dāng)事件發(fā)生時(shí)函數(shù)才會(huì)執(zhí)行。兩家公司對(duì)于事件流出現(xiàn)了截然相反的定義。級(jí)事件規(guī)定的事件流包括三個(gè)階段事件捕獲階段處于目標(biāo)階段事件冒泡階段。我們又把事件處理程序稱為事件偵聽器。 JavaScript事件流 0.DOM級(jí)別與DOM事件 首先在介紹DOM事件之前我們先來(lái)認(rèn)識(shí)下DOM的不同級(jí)別。針對(duì)不同級(jí)別的DOM，我們的DOM事件處理方式也是...

    Taste 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

fnngj

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<