JS有三种常用的绑定事件的方法
- 在DOM元素上直接绑定
- 在JS代码中绑定
- 在JS中绑定事件监听函数
在DOM中直接绑定，行内绑定
<button onclick="fn()">按钮</button>
<script>
function fn(ev) { console.log('DOM0级事件，行内绑定') }
</script>
- 我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、onkeydown、onkeyup等。不列出了。
- 行内绑定时没办法解绑的，但是可以将绑定函数改写成空函数来实现。
在JS代码中绑定，也叫DOM0级事件绑定
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = fn;
function fn(ev) { console.log('DOM0级事件，JS绑定') }
</script>
- JS代码中绑定可以使JS和HTML分离，结构清晰，便于管理和开发。
- DOM级事件只能绑定一个事件，如果绑定多个也只有最后一个会被触发
- 想解绑直接可以把绑定指向null
btn.onclick = null;。- 如果对一个元素同时进行行内绑定和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>
- addEventListener() 或 attachEvent() 来绑定事件监听函数。attachEvent事件名要加'on'，没有第三个参数
- 如果不考虑兼容IE6-8可以只使用addEventListener。
- DOM2级事件可以同时绑定多个监听，事件触发时会全部监听到。
- 第三个参数有true和false两个值，false：事件在冒泡阶段监听（默认值），true：在捕获阶段触发。
- IE的attachEvent没有第三个参数，它默认就是在冒泡阶段触发。
- DOM2级事件有单独的解绑函数。
事件冒泡、事件捕获和事件委托
事件监听的解绑
if (document.removeEventListener) { // 支持 removeEventListener
btn.removeEventListener('click', fn, false);
} else { //（IE6-8）
btn.detachEvent('onclick', fn);
}
三个参数要和绑定时完全一致才会解绑成功。第三个参数默认值时false
现在DOM3级事件也有了
和DOM2区别不大，我还没有研究，就先不卖弄了。
