---

JavaScript HTML DOM 事件

HTML DOM事件是由用户或者浏览器引擎触发的JavaScript函数。当网页中的某个事件发生时，例如按钮被点击，输入框内容变化等，事件处理程序会自动执行并处理相应的事件。

HTML DOM 事件包含了许多类型的事件，例如鼠标事件、键盘事件、表单事件等等。针对不同类型的事件，可以绑定特定的处理函数，以响应相应的事件。

事件类型

以下是一些常见的事件类型：

• 鼠标事件： click、dblclick、mousedown、mousemove、mouseout、mouseover、mouseup
• 键盘事件：keydown、keyup、keypress
• 表单事件：blur、change、focus、reset、submit
• 文档事件：DOMContentLoaded、load、resize、scroll、unload

事件处理机制

DOM 事件处理机制包含三个组成部分：事件、事件处理程序和事件监听器。

事件监听器可以将一个或多个事件处理程序附加到一个元素上，以响应当前或者将来可能发生的事件。当一个事件发生时，该元素会将事件传递给事件监听器，由事件监听器选择或执行相应的事件处理程序。

事件处理程序

事件处理程序是一个javascript函数，用于处理特定类型的DOM事件。可以通过多种方式将一个事件处理程序绑定到一个元素上：

HTML事件处理程序

通过 HTML 元素的事件属性绑定事件处理程序：

<button onclick="myFunction()">Click me</button>

DOM level 0事件处理程序

通过直接给DOM元素属性赋值的方式绑定事件处理程序：

document.getElementById("myBtn").onclick = function() {
  alert("Hello World!");
};

DOM level 2事件处理程序

通过使用 addEventListener() 绑定事件处理程序：

document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});

使用 addEventListener() 方法绑定的事件处理程序可以与同一元素的多个事件同时关联，而不会覆盖之前的事件处理程序。

事件对象

当一个事件发生时，会创建一个事件对象，事件处理程序可以通过该对象来获取事件的详细信息。

例如，在 click 事件触发时，鼠标的位置可以通过事件对象的 pageX 和 pageY 属性来获取：

function handleClick(e) {
  console.log("The mouse was clicked at " + e.pageX + ", " + e.pageY);
}

element.addEventListener("click", handleClick);

在处理事件时，事件对象总是传递给事件处理程序的第一个参数。

阻止默认行为

有时候，当一个事件发生时，浏览器默认会执行一些行为，例如点击链接时跳转到新页面，或者表单提交时刷新页面。可以使用 preventDefault() 方法阻止浏览器执行默认行为：

document.getElementById("myLink").addEventListener("click", function(event){
    event.preventDefault();
    console.log("The link was clicked.");
});

结论

通过 Javascript HTML DOM 事件，可以轻松地实现网页的交互功能，为用户提供更好的体验。我们可以通过以下方式来绑定和处理 DOM 事件：

• 使用 HTML 元素的事件属性
• 使用 DOM level 0 事件处理程序
• 使用 DOM level 2 事件处理程序

同时，我们可以通过事件对象获取到事件的详细信息，并使用 preventDefault() 方法阻止浏览器默认行为。