有关于DOM事件绑定

DOM0级事件和DOM二级事件的区别：
- DOM0 和 DOM0 会相互覆盖，JS中的绑定的事件会覆盖行内绑定的事件
- DOM2不会覆盖自身，并且可以同DOM0共存，执行顺序按照绑定的顺序

此外，一直不明白的一点，为什么要分DOM0级事件 和 DOM0级事件呢？我也是纠结了很久才明白的：
DOM2级事件可以在同一个元素上绑定多个同类型的事件，而相互之间不受影响；
如给一个元素绑定多个click,然后当元素点击后，按照绑定的顺序依次执行每个​函数；同样的情况如果用DOM0级绑定，点击元素后只会执行最后绑定的那一个函数

DOM二级事件的绑定方法：

ele.addEventListener(event, listener, useCapture);
ele.removeEventListener(event, listener, useCapture);

params:
- event: 事件名称，不带on
- listener: 监听函数
- useCapture: Boolean类型，是否采用事件捕获方式，defult false（true: 事件捕获方式； false: 事件冒泡方式）

DOM触发的三个阶段：
1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

事件传播之捕获
当触发DOM事件后，浏览器会从根节点开始由外至内进行事件传播；即点击子元素后，如果父元素通过事件捕获方式注册了方法，会先触发父元素绑定的事件；
事件传播之冒泡
与捕获相反，当触发DOM事件后，浏览器会由内到外进行事件传播，直至根节点（IE6,7,8至document为止，其它至window）；即点击了一个元素之后，会逐层向上传递，如果相应的上层元素也绑定了相同的事件，各层元素的事件也会依次触发
（PS: 点击一个元素，当前元素开始逐层向上所有元素的click事件都会被依次触发）

下面来看DOMO:

<div class="parents" id="parents" onclick="console.log('DOM0 parents');">
    parents
    <div class="father" id="father" onclick="console.log('DOM0 father');">
        father
        <div class="son" id="son" onclick="console.log('DOM0 son');">
            son
        </div>
    </div>
</div>
<script>
    parents.onclick = function () {
        console.log('dom0 script parents');
    };
    father.onclick = function () {
        console.log('dom0 script father');
    };
    son.onclick = function () {
        console.log('dom0 script son');
    };
    function parents1() {
        console.log('dom2 parents one');
    }
    function parents2() {
        console.log('dom2 parents two');
    }
    function father1() {
        console.log('dom2 father one');
    }
    function father2() {
        console.log('dom2 father two');
    }
    function son1() {
        console.log('dom2 son one');
    }
    function son2() {
        console.log('dom2 son two');
    }
</script>

1.使用​冒泡方式绑定DOM二级事件：

parents.addEventListener('click', parents1, false);
parents.addEventListener('click', parents2, false);
father.addEventListener('click', father1, false);
father.addEventListener('click', father2, false);
son.addEventListener('click', son1, false);
son.addEventListener('click', son2, false);

行内绑定的DOM0级事件被覆盖，DOM2级事件​与DOM0级共存，按绑定的先后顺序依次执行
当点击son后的执行结果:

2.使用捕获方式绑定DOM二级事件：

parents.addEventListener('click', parents1, true);
parents.addEventListener('click', parents2, true);
father.addEventListener('click', father1, true);
father.addEventListener('click', father2, true);
son.addEventListener('click', son1, true);
son.addEventListener('click', son2, true);

当点击son后执行结果：