亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

# Javascript # DOM2兼容處理

fnngj / 478人閱讀

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

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

語法問題

[標準]
curEle.addEventListener("type", fn, false);
[IE6~8]
curEle.attachEvent("ontype", fn)

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


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

當(dāng)事件行為觸發(fā)，執(zhí)行對應(yīng)事件池中存放的方法時，IE低版本瀏覽器執(zhí)行方法順序是亂序的，而標準瀏覽器是按照綁定的先后順序依次執(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);

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

重復(fù)問題

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

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

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

THIS問題

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

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

在標準瀏覽器中 this--> body
在IE低版本中 this--> window

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/104520.html

相關(guān)文章

  • #JavaScript # javascript DOM0和DOM2事件

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

    Salamander 評論0 收藏0

  • JavaScript中幾個重要的知識點（2） ---- DOM事件

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

    dantezhao 評論0 收藏0

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

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

    WalkerXu 評論0 收藏0

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

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

    wujl596 評論0 收藏0

  • 前端小知識--JavaScript事件流

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

    Taste 評論0 收藏0

發(fā)表評論

0條評論

fnngj

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<