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