DOM0
DOM0级事件具有极好的跨浏览器优势,会以最快的速度绑定。
为某一个元素的同一个行为绑定不同的方法在行内会分别执行。
为某一个元素的同一个行为绑定不同的方法在script标签中后面的方法会覆盖前面的方法。
<div id="box" onclick="fun1();fun2()">点我</div>
<script>
// 某一个元素的同一个行为绑定不同的方法在行内会分别执行
function fun1() {
console.log('方法1');
}
function fun2() {
console.log('方法2');
}
// 执行 方法1 // 执行方法2
</script>
<div id="box">点我</div>
<script>
// 某一个元素的同一个行为绑定不同的方法在script标签中后面的方法会覆盖前面的方法
var box = document.getElementById('box');
box.onclick = fun1;
box.onclick = fun2;
function fun1() {
console.log('方法1');
}
function fun2() {
console.log('方法2');
}
// 执行方法2;方法2覆盖方法1,所有方法1不执行
</script>
删除DOM 0事件处理程序,只要将对应事件属性设为null即可。
box.onclick = null;
DOM1
DOM1一般只有设计规范没有具体实现,所以一般跳过。
DOM2
DOM2级事件是通过addEventListener绑定的事件,IE下的DOM2事件通过attachEvent绑定;可以给某一个元素的同一个行为绑定不同的方法在行内会分别执行。
<div id="box">点我</div>
<script>
var box = document.getElementById('box');
box.addEventListener('click', fun1,false);
box.addEventListener('click', fun2,false);
function fun1() {
console.log('方法1');
}
function fun2() {
console.log('方法2');
}
// 执行方法1 // 执行方法2
</script>
删除DOM 2事件处理程序,通过removeEventListener
box.removeEventListener('click', fun2,false);
DOM3
DOM3级事件在DOM2级事件的基础上添加了更多的事件类型,全部类型如下:
事件类型 | 说明 | 举例 |
---|---|---|
UI事件 | 当用户与页面上的元素交互时触发 | load、scroll |
焦点事件 | 当元素获得或失去焦点时触发 | blur、focus |
鼠标事件 | 当用户通过鼠标在页面执行操作时触发 | dbclick、mouseup |
滚轮事件 | 当使用鼠标滚轮或类似设备时触发 | mousewheel |
文本事件 | 当在文档中输入文本时触发 | textInput |
键盘事件 | 当用户通过键盘在页面上执行操作时触发 | keydown、keypress |
合成事件 | 当为IME(输入法编辑器)输入字符时触发 | compositionstart |
变动事件 | 当底层DOM结构发生变化时触发 | DOMsubtreeModified |
同时DOM3级事件也允许开发人员自定义一些事件。