JavaScript DOM0、DOM2级事件简述

JavaScript DOM0、DOM2级事件简述

1、DOM0级事件：on+事件类型

1.1、在html行内直接绑定，

1.2、在js中绑定

2、DOM2级事件：

addEventListener(events,handler,boolean)，

removeEventListener（events,handler）

2.1、参数events是以空格间隔的事件类型，handler是事件处理程序，boolean表示是冒泡还
是捕获，true表示捕获，flase表冒泡，默认冒泡。

3、解绑事件：

3.1、DOM0级事件是将onclick属性指向一个函数，所以只需要修改onclick属性指向null即可

3.2、DOM2级事件是为对象添加了监听某种事件的监听器，解绑的时候由removeEventListener
需要指定事件的类型，和事件处理程序的名字，因此这个方法无法解绑匿名事件处理函数的事
件。因为具体指定了事件和事件处理函数，所以同个事件类型的不同事件处理程序不相互影响
，从程序最后的输出可以验证

3.3、DOM0级和DOM2共存，但是执行顺序是按照绑定先后进行的，比如以下代码中先绑定DOM2
事件，再绑定DOM0事件结果先执行DOM2再执行DOM0

/* 1.1*/
<button onclick="alert('行内DOM0级')">点击</button>

(function(){
/*1.2*/
var btn = document.getElementsByTagName('button')[0];
/* 2.1 */
btn.addEventListener('click',dom2);
btn.addEventListener('click',dom2Plus);
btn.onclick = function(){
console.log('jsDOM0级');
}
function dom2(){
console.log('DOM2级事件');
}
function dom2Plus(){
console.log('DOM2级事件Plus');
}
/* 输出结果：
DOM2级事件
DOM2级事件Plus
jsDOM0级
*/

/* 以下代码解绑了DOM0和DOM2事件*/
/* 3.1*/
btn.onclick = null;
/* 3.2 */
btn.removeEventListener('click',dom2);

/* 输出：
DOM2级事件Plus
*/
})();