HTML DOM 事件

HTML DOM（文档对象模型）事件是发生在HTML元素上的“事情”。当用户在网页上执行某些操作时（如点击鼠标、按下键盘上的键、移动鼠标等），或者当网页本身发生变化时（如加载完成、页面关闭等），就会触发这些事件。

这些事件可以被JavaScript捕获并作出响应，通常是通过为元素添加事件监听器来实现的。事件监听器是一个等待事件发生的函数，当事件发生时，该函数会被自动调用。

常见的HTML DOM事件

以下是一些常见的HTML DOM事件：

• click：当用户在元素上点击鼠标按钮时触发。
• dblclick：当用户在元素上双击鼠标按钮时触发。
• mouseover：当鼠标指针移动到元素上方时触发。
• mouseout：当鼠标指针从元素上移开时触发。
• mousemove：当鼠标指针在元素内部移动时触发。
• keydown、keypress、keyup：这些事件与键盘操作相关。keydown在用户按下键盘上的任何键时触发，keypress 在用户按下可打印的键时触发（注意，它可能不会在所有情况下都触发，具体取决于浏览器和操作系统），keyup 在用户释放键盘上的键时触发。
• load：当页面或页面上的某个元素（如图片、脚本、框架等）加载完成时触发。
• unload：当用户离开页面时触发（例如，点击浏览器中的关闭按钮或链接到另一个页面）。但请注意，由于隐私和安全的原因，许多现代浏览器限制了可以在unload事件中执行的操作。
• change：当元素的值发生变化且元素失去焦点时触发（通常用于<input>、<select>和<textarea>元素）。
• submit：当表单提交时触发。
• focus、blur：当元素获得焦点时触发focus事件，当元素失去焦点时触发blur事件。

如何添加事件监听器

在JavaScript中，你可以使用addEventListener()方法为元素添加事件监听器。这个方法接受两个必需的参数：要监听的事件名称（不带on前缀）和一个事件处理函数。

// 获取元素  
var myButton = document.getElementById('myButton');  
  
// 为元素添加点击事件监听器  
myButton.addEventListener('click', function() {  
  alert('按钮被点击了！');  
});

注意事项

• 你可以为同一个元素添加多个相同类型的事件监听器，这些监听器会按照它们被添加的顺序依次执行。
• 使用addEventListener()添加的事件监听器可以使用removeEventListener()方法来移除。但是，为了成功移除监听器，你需要传递与添加时完全相同的函数引用。
• 某些事件（如load和unload）可以在window对象上监听，而不是在特定的DOM元素上。
• 在添加事件监听器时，还可以传递第三个可选参数，它是一个布尔值，用于指定事件是否在捕获阶段而不是冒泡阶段触发。默认情况下，事件是在冒泡阶段触发的。但是，了解事件传播机制对于编写高效的JavaScript代码非常重要。