DOM级别和事件

DOM级别与DOM事件

在前端开发中，会涉及很多的交互事件，这些交互事件都是由DOM事件组成的。对于不同级别的DOM，DOM事件的处理方式也是不同的。

DOM级别一共可以分为4个级别：DOM0级、DOM1级、DOM2级和DOM3级。

DOM事件一共可以分为3个级别：DOM0级事件处理、DOM2级事件处理、DOM3级事件处理。

DOM0级事件

1、行内事件

<input type="button" id="btn" value="按钮" onclick="alert('行内事件')">

2、元素.on事件名=函数

document.getElementById("btn").onclick = function () {
	alert('事件');
}

DOM0级事件就是将一个函数赋值给一个事件处理属性，缺点在于一个处理程序无法同时绑定多个处理函数。

DOM1级事件问题

为什么没有1级DOM?

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的2级DOM事件模型

DOM2级事件

只有监听方法，包含添加和移除事件处理程序：addEventListener()和removeEventListener()。

都有三个参数1、事件名；2、事件处理程序函数；3、ture:表示在捕获阶段调用，false：表示在冒泡阶段调用

document.getElementById("btn").addEventListener("click", function(){alert('事件处理程序函数')}, false);

DOM3级事件

DOM3级事件是在DOM2级事件的基础上添加很多事件类型。
UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素获得或失去焦点时触发，如：blur、focus
鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
同时DOM3级事件也允许使用者自定义一些事件。