# Javascript # DOM2兼容處理

fnngj 發布于2019-08-23 18:01 / 432人閱讀

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

DOM2兼容問題，除了語法上的區別，在處理的機制上也有下列問題：順序問題，重復問題，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);
};

順序問題

當事件行為觸發，執行對應事件池中存放的方法時，IE低版本瀏覽器執行方法順序是亂序的，而標準瀏覽器是按照綁定的先后順序依次執行的。

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);

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

重復問題

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

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

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

THIS問題

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

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

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

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

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

云服務器 GPU云服務器 javascript兼容性 javascript異常處理 dom0和dom2 兼容模式不兼容js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104520.html

#JavaScript # javascript DOM0和DOM2事件

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

Salamander 2019-08-23 17:18 評論0 收藏0
JavaScript中幾個重要的知識點（2） ---- DOM事件

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

dantezhao 2019-08-20 17:33 評論0 收藏0
Event Handler 事件處理程序 1 ---《高程3》

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

WalkerXu 2019-08-20 11:31 評論0 收藏0
Event Handler 事件處理程序 1 ---《高程3》

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

wujl596 2019-08-01 15:47 評論0 收藏0
前端小知識--JavaScript事件流

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

Taste 2019-08-26 11:43 評論0 收藏0