JavaScript DOM

HTML DOM (文档对象模型)

1. DOM0级处理事件就是将一个函数赋值给一个事件处理属性。

// 改变 HTML 输出流 在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
// 改变 HTML 内容 document.getElementById(id).innerHTML=新的 HTML
// 改变 HTML 属性 document.getElementById(id).attribute=新属性值
// 改变 HTML 样式 document.getElementById(id).style.property=新样式
// 使用时间 onclick="document.getElementById('id1').style.color='red'"
// 1. 当用户点击鼠标时
onclick
// 2. 当网页已加载时
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
// 3. 当图像已加载时
// 4. 当鼠标移动到元素上时
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
// 5. 当输入字段被改变时
onchange 事件常结合对输入字段的验证来使用。
// 6. 当提交 HTML 表单时
// 7. 当用户触发按键时

2. DOM2级事件在DOM0级时间段额基础上弥补了一个处理处理程序，无法同时绑定多个处理函数的缺点。允许给一个程序添加多个处理函数。

   1. addEventListener() 方法
   
   addEventListener() 方法用于向指定元素添加事件句柄。
   
   addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
   
   你可以向一个元素添加多个事件句柄。
   
   你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
   
   你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
   
   addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
   
   当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
   
   你可以使用 removeEventListener() 方法来移除事件的监听。
   
   2. removeEventListener() 方法
   
   removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄

3. DOM3级事件是在DOM2级事件的基础上添加很多事件类型。

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

DOM0级

• 使用赋值方式绑定事件；
• 只能在冒泡阶段触发；
• 只能绑定一个事件函数；
• 通过置空onclick属性解绑事件；
• 事件函数this属性引用当前函数对象。

DOM2级

1. 非IE方式

• 使用addEventListeren绑定事件；
• 事件名无on前缀；
• 使用addEventListeren第三个参数控制事件触发阶段；
• 可绑定多个事件函数；
• 多个事件函数的书法顺序和绑定顺序一样；
• 事件函数this属性引用当前函数对象；

2. IE方式和非IE不同的是以下几点：

• 事件名带on前缀；
• 事件函数this属性引用全局对象；
• 多个事件函数的书法顺序和绑定顺序相反；