前端开发JavaScript

DOM0级事件处理和DOM2级事件处理的区别

JavaScript

DOM0级

分为两个

  • 在标签内写onclick事件

    1
    <input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >

  • 在JS写onlicke=function（）{ }函数

    1
    2
    3
    document.getElementById("myButton").onclick = function () {
        alert('thanks');
    }

DOM0级只能添加到冒泡阶段，相同对象的相同事件就覆盖了，如下面的代码最后只弹出B

1
2
3
4
5
6
box.onclick = function(){
    alert("A")
}
box.onclick = function(){
    alert("B")
}

DOM2级

只有一个：监听方法，有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()。

他们都有三个参数

  • 第一个参数是事件名（如click）
  • 第二个参数是事件处理程序函数
  • 第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用，默认为false

DOM2级的特点

  • addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用

  • 只有2级DOM包含3个事件：事件捕获阶段、处于目标阶段和事件冒泡阶段

    1
    2
    3
    <span>
        <a></a>
    </span>

点击a后capturing(捕捉)阶段事件传播会从document-> span->a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a->span->document 。

  • 最底层的元素就不再区分捕获阶段和事件冒泡阶段

  • 事件不会覆盖，先写的先执行

DOM事件流

DOM事件流

为什么没有DOM1级

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的2级DOM事件模型

最后以一道面试题加深对DOM0级和DOM2级的理解

题目：box1包含box2，box2包含box3，以下代码会依次弹出什么：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
box2.onclick = function(){
    alert("A")
}
box2.onclick = function(){
    alert("B")
} 
box2.addEventListener("click",function(){
    alert("C")
},false)
box2.addEventListener("click",function(){
    alert("D")
},false)
box2.addEventListener("click",function(){
    alert("E")
},true)
box2.addEventListener("click",function(){
    alert("F")
},true)
box3.addEventListener("click",function(){
    alert("G")
},false)
box3.addEventListener("click",function(){
    alert("H")
})
box3.addEventListener("click",function(){
    alert("I")
})

会依次弹出：E，F，G，H，I，B，C，D。不解释了

分享到