#javascript# DOM2

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞