JavaScript DOM0、DOM2级事件简述

JavaScript DOM0、DOM2级事件简述

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

1.1、在html行内直接绑定，

1.2、在js中绑定

A.DOM0级事件和DOM0级事件相互之间会覆盖，比如以下代码执行后弹出jsDOM0级，js中绑定的事件
覆盖了行内绑定的事件；

2、DOM2级事件：

addEventListener(events,handler,boolean)，

removeEventListener（events,handler）

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

B.DOM2级绑定事件不会覆盖自身，和DOM0级也能共存；

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
    */
  })();