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 :冒泡阶段
这张经典图片,体现了整个传播机制
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 排版