# Javascript # DOM2兼容处理

fnngj 发布于2019-08-23 18:01 / 431人阅读

摘要：兼容问题，除了语法上的区别，在处理的机制上也有下列问题顺序问题，重复问题，对象问题。没有进行去重处理。在标准浏览器中在低版本中究其根本，都是低版本浏览器对于它内置事件池处理机制的不完善导致的。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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