JavaScript HTML DOM事件

在Web开发中，JavaScript可以通过DOM（文档对象模型）来操作HTML页面的各种元素。DOM事件提供了一种处理、触发、和捕获页面事件的方法。

事件类型

DOM事件可以分为以下几种类型：

• 鼠标事件：click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout。
• 键盘事件：keydown、keypress、keyup。
• HTML文档事件：load、unload、abort、error。
• 表单事件：submit、reset、change、blur、focus。
• 窗口事件：resize、scroll。

事件属性

在处理DOM事件时，可以使用以下事件属性：

• event.target：返回触发事件的对象。
• event.type：返回事件的类型。
• event.keyCode：返回按下的键的键码。
• event.clientX 和 event.clientY：返回鼠标指针位置的横坐标和纵坐标。
• event.preventDefault()：取消事件的默认行为。
• event.stopPropagation()：停止事件的传播。

事件监听

在JavaScript中，可以使用以下方法来监听DOM事件：

// HTML元素.addEventListener(事件名, 处理函数, useCapture?);
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  alert("Hello World!");
}

还可以使用以下方法来监听DOM事件：

// HTML元素.attachEvent(事件名, 处理函数);
document.getElementById("myBtn").attachEvent("onclick", myFunction);

function myFunction() {
  alert("Hello World!");
}

事件冒泡

当父元素和子元素都具有相同的事件处理函数时，事件会先传递到子元素，再传递到父元素。这一过程称为事件冒泡。

可以使用以下代码阻止事件冒泡：

event.stopPropagation();

事件代理

在处理大量元素的事件时，使用事件代理可以提高性能。事件代理是指将事件处理函数添加到祖先元素，然后通过冒泡机制将事件传递到实际目标元素。

下面是一个示例：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

<script>
document.getElementById("myList").addEventListener("click", function(event) {
  if (event.target.nodeName === "LI") { // 判断是否为LI元素
    console.log("Clicked on " + event.target.innerHTML);
  }
});
</script>

结论

DOM事件提供了一种处理、触发、和捕获页面事件的方法。通过事件属性、事件监听、事件冒泡和事件代理，我们可以轻松地实现各种交互功能。