DOM事件全解析,看这一篇文章就够了

DOM事件是指当网页中的某个元素产生特定的事件时所触发的行动或函数。DOM事件可以是用户交互事件（比如点击、鼠标移动、键盘输入等），也能够是浏览器事件（比如页面加载、文档准备就绪等）。在本文中，我们将全面解析DOM事件，包括事件机制、事件类型、事件处理程序等方面。
一、事件机制
1. 事件的触发
DOM事件的触发分为两类：用户交互事件和浏览器事件。用户交互事件是由用户与页面进行交互所触发的事件，比如点击、移动鼠标、键盘输入等。浏览器事件是由浏览器的某个特定状态或操作所触发的事件，比如页面加载、文档准备就绪等。
2. 事件的冒泡和捕获
事件冒泡是指当一个元素触发某个事件时，该事件会从触发元素开始向上冒泡，顺次触发其父元素的相同事件。事件捕获是指当一个元素触发某个事件时，该事件会从最外层的父元素开始向下捕获，顺次触发子元素的相同事件。事件冒泡和捕获是DOM事件的两个阶段。
3. 禁止事件冒泡和默许行动
在事件处理程序中，可以通过调用`event.stopPropagation()`方法来禁止事件的冒泡，从而避免父元素的相同事件被触发。可以通过调用`event.preventDefault()`方法来禁止事件的默许行动，比如在链接上点击时禁止页面跳转。
二、事件类型
1. 鼠标事件
鼠标事件包括点击、双击、右击、鼠标移动、鼠标转动等。可以通过绑定相应的事件处理程序来响应这些鼠标事件。
2. 键盘事件
键盘事件包括按键按下、按键松开、按键长按等。可以通过绑定相应的事件处理程序来响应这些键盘事件。
3. 表单事件
表单事件包括表单提交、输入框取得焦点、输入框失去焦点等。可以通过绑定相应的事件处理程序来响应这些表单事件。
4. 文档加载事件
文档加载事件包括页面加载终了、DOM树构建终了等。可以通过绑定相应的事件处理程序来响应这些文档加载事件。
三、事件处理程序
1. HTML事件处理程序
可以通过在HTML标签中添加`onclick`等属性来指定事件处理程序，比如`Click Me`。这类方式简单直接，但不容易保护和扩大。
2. DOM0级事件处理程序
可以通过给元素的事件属性赋值来指定事件处理程序，比如`element.onclick = function() { ... }`。这类方式也比较简单，但只能绑定一个事件处理程序。
3. DOM2级事件处理程序
可以通过`addEventListener`方法来指定事件处理程序，比如`element.addEventListener('click', function() { ... })`。这类方式可以绑定多个事件处理程序，并且可以在捕获阶段或冒泡阶段处理事件。
4. IE事件处理程序
在IE浏览器中，可以通过`attachEvent`方法来指定事件处理程序，比如`element.attachEvent('onclick', function() { ... })`。这类方式类似于DOM2级事件处理程序，但只能绑定一个事件处理程序。
总结：
本文全面解析了DOM事件，包括事件机制、事件类型和事件处理程序等方面。了解DOM事件的基本知识