十八、DOM之事件绑定的两种处理程序（DOM0和DOM2） ------ 2020-01-08

1、什么是DOM0、DOM2：

/**
简单说就是JS给DOM元素绑定事件的两种处理方式，DOM0是最初版本的给DOM元素绑定事件的的方法；
而DOM2是在DOM0的基础上的迭代版本；
为什么没有DOM1事件处理程序？不是没有，是因为在DOM0和DOM2中间的迭代版本对DOM0没做什么
修改；所以DOM0也可以说是DOM1；
*/

2、DOM0级事件处理程序：

box.onclick = function () {}

/**
box是一个DOM元素，事实上每一个DOM元素都是一个对象，每一个DOM元素对象都是对应类的实例；
浏览器天生为其设置了很多私有属性和共有的属性、方法，而onclick就是其中的一个私有属性（事件类
私有属性，还有很多其他事件私有属性），这些属性的默认值是null；
*/

/**
DOM0级事件处理程序的原理：就是给元素的某一个事件私有属性赋值（浏览器会建立监听机制，当我们
触发元素的某个行为时，浏览器会自己把属性中赋的值去执行）；
*/

/**
因此DOM0级事件绑定无法给当前元素绑定多个同一事件，多次绑定后面的事件会把前面的事件覆盖掉；
*/
box.onclick = function () {
    console.log(1);
}
box.onclick = function () {
    console.log(2); // 出发点击行为只会输出2；
}

3、DOM2级事件处理程序：

// 高版本浏览器添加事件处理程序
box.addEventListener('click', function () {}, false)；
// 高版本浏览器移除事件处理程序
box.removeEventListener(函数名);

// IE低版本浏览器添加事件处理程序
box.attachEvent('onclick', function () {})；
// IE低版本浏览器移除事件处理程序
box.dettachEvent(函数名)；