#javascript# DOM2

2024年5月30日 250次阅读 来源: 大煜儿

DOM2事宜绑定的道理
1.DOM2事宜绑定运用的addEventListener/attachEvent都是在EventTarget这个内置类的原型上定义的，我们运用的时刻，会经由过程原型链找个这个要领，然后实行绑定的事宜。
2.浏览器会给当前元素的某一个事宜行动拓荒一个事宜池（事宜队列），正确来讲，浏览器有一个一致的事宜池，我们给每一个元素绑定的某个要领都邑放在这个事宜池中，然后经由过程相干的标识来举行辨别。当我们经由过程addEventListener/attachEvent做事宜监听的时刻，会把绑定的要领寄存在事宜池中。
3.当元素的某一个行动被触发，浏览器会把当前寄存在事宜池中的一切要领，顺次根据寄存的先后递次实行。

DOM2特性

  1. 一切DOM0支撑的事宜行动DOM2都能够运用，而且DOM2还支撑一些DOM0没有的事宜行动：DOMContentLoaded
//DOM0下没有这个属性：
document.body.DOMContentLoaded === undefined

//DOM2规范浏览器下：
document.body.addEventListener('DOMContentLoaded',function(){
    //规范浏览器中兼容这个事宜，当浏览器中的DOM构造加载完成，就会触发这个事宜（也会把绑定的要领实行）
},false)

//DOM2下IE6~8下也不支撑这个事宜
document.body.attachEvent('onDOMContentLoaded',function(){
})

2.DOM2中能够给当前元素的某一个事宜行动绑定多个差别的要领（由于绑定的一切要领都寄存在事宜池中）

function fn1(){
console.log('1');
}

function fn2(){
console.log('2');
}

function fn3(){
console.log('3');
}

document.body.addEventListener('click', fn1, false);
document.body.addEventListener('click', fn3, false);
document.body.addEventListener('click', fn2, false);

//fn2事宜移除。移除的时刻请求   事宜范例、绑定的要领、流传阶段三个完全一致才能够移撤除

document.body.removeEventListener('click', fn2, false)

DOM0和DOM2实行递次的题目

function fn(){
console.log(1);
}

document.addEventListerner('click', fn, false);
document.addEventListerner('click', fn, false);//第二次存储不到事宜池中，由于事宜池中已存在fn。  到这里只会输出 1
document.onclick = fn;//会输出  1  1
document.onclick = function() {
    console.log(2);
}
document.addEventListerner('click', function(){
console.log(3);
}, false);
//输出效果 1 2 3
// 1. DOM0和DOM2绑定的要领是毫无关系的（由于他们是两套差别的处置惩罚机制）,纵然绑定的要领雷同，也是实行2次
//2. 谁先绑定，就先实行谁。

DOM0：浏览器会把一些经常使用的事宜挂载到元素对象的私有属性上。让我们能够完成DOM0事宜绑定
DOM2：通常浏览器给元素生成设置的事宜在DOM2中都能够用

    原文作者：大煜儿
    原文地址: https://segmentfault.com/a/1190000019220492
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞