DOM的事件绑定、事件监听

JS有三种常用的绑定事件的方法

• 在DOM元素上直接绑定
• 在JS代码中绑定
• 在JS中绑定事件监听函数

在DOM中直接绑定，行内绑定

<button onclick="fn()">按钮</button>
<script>
    function fn(ev) { console.log('DOM0级事件，行内绑定') }
</script>

1. 我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、onkeydown、onkeyup等。不列出了。
2. 行内绑定时没办法解绑的，但是可以将绑定函数改写成空函数来实现。

在JS代码中绑定，也叫DOM0级事件绑定

<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = fn;
    function fn(ev) { console.log('DOM0级事件，JS绑定') }
</script>

1. JS代码中绑定可以使JS和HTML分离，结构清晰，便于管理和开发。
2. DOM级事件只能绑定一个事件，如果绑定多个也只有最后一个会被触发
3. 想解绑直接可以把绑定指向null btn.onclick = null;。
4. 如果对一个元素同时进行行内绑定和JS绑定，行内绑定会被JS绑定覆盖。

使用事件监听绑定，也叫DOM2级事件，可以绑定多个监听

<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    if (document.addEventListener) { // 支持 addEventListener
        btn.addEventListener('click', fn, false);
    } else { // 不支持addEventListener（IE6-8）
        btn.attachEvent('onclick', fn);
    }
    function fn(ev) { console.log('DOM2级事件绑定') }
</script>

1. addEventListener() 或 attachEvent() 来绑定事件监听函数。attachEvent事件名要加'on'，没有第三个参数
2. 如果不考虑兼容IE6-8可以只使用addEventListener。
3. DOM2级事件可以同时绑定多个监听，事件触发时会全部监听到。
4. 第三个参数有true和false两个值，false：事件在冒泡阶段监听（默认值），true：在捕获阶段触发。
5. IE的attachEvent没有第三个参数，它默认就是在冒泡阶段触发。
6. DOM2级事件有单独的解绑函数。
   事件冒泡、事件捕获和事件委托

事件监听的解绑

if (document.removeEventListener) { // 支持 removeEventListener
    btn.removeEventListener('click', fn, false);
} else { //（IE6-8）
    btn.detachEvent('onclick', fn);
}

三个参数要和绑定时完全一致才会解绑成功。第三个参数默认值时false

现在DOM3级事件也有了

和DOM2区别不大，我还没有研究，就先不卖弄了。