10分钟理解DOM0,1,2,3的区别

2,172 阅读3分钟

DOM0,DOM1,DOM2,DOM3的区别

DOM0:

  • DOM0就是直接通过onclick写在html里面的事件,非常注意的地方,onclick不是事件,click才是事件,
  • 只有DOM元素天生拥有这个私有属性(onxxx事件私有属性),我们赋值的方法才叫事件绑定,否则属于设置自定义属性
  • 给当前元素的某一私有属性(onXXX)赋值的过程;(之前属性默认值是null,如果我们赋值了一个函数,就相当于绑定了一个方法)
//按钮点击事件
btn.onclick=function(){e};
arguments[0]=== e;  //这个是事件对象
//input失去焦点事件
input.onblur=function(){};
//键盘按下事件
key.onkeydown=function(){};
  • 事件对象,当元素的某个事件行为被触发,不仅会把之前绑定的方法执行,还会给绑定的方法传递一个值(浏览器默认传递的),就是上例中的e

    • 这个值是个对象类型的值,里面存储了很多的属性和方法,
    • 这些存储的值都是当前本次操作的基本信息,例如:鼠标位置,触发行为类型
  • 事件的传播机制:

    • 0 none :默认值,不代表任何意思
    • 1 CAPTURING_PHASE 捕获阶段
    • 2 AT_TARGET 目标阶段(当前事件源)
    • 3 BUBBLING _PHASE :冒泡阶段

这张经典图片,体现了整个传播机制

img
img

DOM2

  • 首先我们看看dom2的事件绑定
oBox.addEventLister('click',function(e){
    //this:obx
    },false)
    //false=>让事件在冒泡传播时执行
   //true=>让事件在捕获阶段执行(非常少见)
  • DOM2事件绑定使用的 addEventListener/attachEvent方法都是在eventTarget这个内置类的原型上定义的,我们调用的时候,首先要通过原型链找到这个方法,然后执行完成事件绑定的效果
  • 浏览器会给当前元素的某个事件行为开辟一个事件池(事件队列)【浏览器有一个统一的事件池,每个元素绑定的行为都放在这里,通过相关标志区分】,当我们通addEventListener/attachEvent进行事件绑定的时候,会把绑定的方法放在事件池中`;
  • 当元素的某一行为被触发,浏览器回到对应事件池中,把当前放在事件池的所有方法按序依次执行
  • DOM2中可以给当前元素的某一事件行为绑定多个不同方法(因为绑定的所有方法都放在事件池中);

dom0和dom2的区别

  • 首先我们看下分别的执行过程:
    • dom0的绑定是使用元素的某一个私有属性onxxx赋值的过程,赋值前这个属性是null,赋值后具备这个属性,建立dom元素的行为监听,然后当用户触发,会把赋值的函数执行
    • dom2的绑定是使用ddEventListener/attachEvent方法都是在eventTarget这个内置类的原型上定义的 ,通过原型链找到方法,完成时间绑定事件池是dom2才有的浏览器给当前元素某个事件行为开辟一个事件池,也就是事件的队列,把绑定的方法放进这里,当事件触发,事件池里的方法依次排序执行,所以dom2可以一个事件绑定多个方法,而dom0,后来的事件会覆盖前面的事件

DOM1和DOM3

为什么把这两个放最后说,因为他们并没有太大的特殊点

  • DOM1:其实就是dom0的规范版本,官方解释就是: DOM1 级规范成为 W3C 的推荐标准,为基本的文档结构及查询提供了接口。

  • DOM3:也就是dom2的扩展版本:对dom2增加了内容模型和文档验证

    小结:具体增加的方法,小伙伴们可以参考高程,但是并没有什么实质性的改变,我就不把他们搬过来了,

本文使用 mdnice 排版