DOM0和DOM2事件的应用和区别详细对比

Posted 2021-05-18 Mzs-Qsy

1.触发次数

零级事件只能注册一次，如果注册多次，后面的会覆盖前面的

 btn.onclick = function () {

      alert(1)
    }
    btn.onclick = function () {

      alert(2)
    }

二级时间可以给同一个事件注册多次，而且会依次触发

btn.addEventListener(\'click\', function () {

      alert(\'我被点了1\')
    })

    btn.addEventListener(\'click\', function () {

      alert(\'我被点了2\')
    })

2.现象原因

DOM0级事件绑定了DOM元素的事件函数，后面的函数会覆盖之前的

DOM2级事件通过事件监听绑定了DOM元素的事件处理函数

3.解绑方式

DOM0级事件，绑定的DOM元素.onclick = null

DOM2级事件,绑定的DOM元素.removeEventListener IE8版本之上

DOM2级事件,绑定的DOM元素.detachEvent(\'on\'+事件名，回调函数)

4.原理解析

4.1DOM0

赋值了一个函数，就相当于绑定了一个方法，当我们赋值一个函数，此时浏览器会把DOM元素和赋值的的函数建立关联，以及建立DOM元素的行为监听，当某一行为被用户触发，浏览器会把赋值的函数执行；

4.2DOM2

addEventListener/attachEvent方法都是在eventTarget这个内置类的原型上定义的，我们调用的时候，首先要通过原型链找到这个方法，然后执行完成事件绑定的效果
浏览器会给当前元素的某个事件行为开辟一个事件池（事件队列）【浏览器有一个统一的事件池，每个元素绑定的行为都放在这里，通过相关标志区分】，当我们通过 addEventListener/attachEvent进行事件绑定的时候，会把绑定的方法放在事件池中；
当元素的某一行为被触发，浏览器回到对应事件池中，把当前放在事件池的所有方法按序依次执行