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

DOM事件是指当网页中的某个元素发生特定的事件时所触发的行为或函数。DOM事件可以是用户交互事件（比如点击、鼠标移动、键盘输入等），也可以是浏览器事件（比如页面加载、文档准备就绪等）。在本文中，我们将全面解析DOM事件，包括事件机制、事件类型、事件处理程序等方面。

一、事件机制

1. 事件的触发

DOM事件的触发分为两类：用户交互事件和浏览器事件。用户交互事件是由用户与页面进行交互所触发的事件，比如点击、移动鼠标、键盘输入等。浏览器事件是由浏览器的某个特定状态或操作所触发的事件，比如页面加载、文档准备就绪等。

2. 事件的冒泡和捕获

事件冒泡是指当一个元素触发某个事件时，该事件会从触发元素开始向上冒泡，依次触发其父元素的相同事件。事件捕获是指当一个元素触发某个事件时，该事件会从最外层的父元素开始向下捕获，依次触发子元素的相同事件。事件冒泡和捕获是DOM事件的两个阶段。

3. 阻止事件冒泡和默认行为

在事件处理程序中，可以通过调用event.stopPropagation()方法来阻止事件的冒泡，从而防止父元素的相同事件被触发。可以通过调用event.preventDefault()方法来阻止事件的默认行为，比如在链接上点击时阻止页面跳转。

二、事件类型

1. 鼠标事件

鼠标事件包括点击、双击、右击、鼠标移动、鼠标滚动等。可以通过绑定相应的事件处理程序来响应这些鼠标事件。

2. 键盘事件

键盘事件包括按键按下、按键松开、按键长按等。可以通过绑定相应的事件处理程序来响应这些键盘事件。

3. 表单事件

表单事件包括表单提交、输入框获得焦点、输入框失去焦点等。可以通过绑定相应的事件处理程序来响应这些表单事件。

4. 文档加载事件

文档加载事件包括页面加载完毕、DOM树构建完毕等。可以通过绑定相应的事件处理程序来响应这些文档加载事件。

三、事件处理程序

1. HTML事件处理程序

可以通过在HTML标签中添加onclick等属性来指定事件处理程序，比如<button onclick="myFunction()">Click Me</button>。这种方式简单直接，但不易维护和扩展。

2. DOM0级事件处理程序

可以通过给元素的事件属性赋值来指定事件处理程序，比如element.onclick = function() { ... }。这种方式也比较简单，但只能绑定一个事件处理程序。

3. DOM2级事件处理程序

可以通过addEventListener方法来指定事件处理程序，比如element.addEventListener('click', function() { ... })。这种方式可以绑定多个事件处理程序，并且可以在捕获阶段或冒泡阶段处理事件。

4. IE事件处理程序

在IE浏览器中，可以通过attachEvent方法来指定事件处理程序，比如element.attachEvent('onclick', function() { ... })。这种方式类似于DOM2级事件处理程序，但只能绑定一个事件处理程序。

总结：

本文全面解析了DOM事件，包括事件机制、事件类型和事件处理程序等方面。了解DOM事件的基本知识