HTML DOM – 事件

在 HTML 文档对象模型（DOM）中，事件是指用户与网页交互时触发的动作，如点击、键盘输入、鼠标移动等。JavaScript 允许开发者在 HTML 元素上注册事件处理程序，以响应这些用户操作。

常见的事件类型：

• 鼠标事件：
  • onclick：当用户点击某个对象时触发。
  • ondblclick：当用户双击某个对象时触发。
  • onmouseover：当鼠标指针移到某元素之上时触发。
  • onmouseout：当鼠标从某元素移开时触发。
  • onmousemove：当鼠标被移动时触发。
  • onmousedown：鼠标按钮被按下时触发。
  • onmouseup：鼠标按键被松开时触发。
• 键盘事件：
  • onkeydown：当用户按下键盘上的键时触发。
  • onkeypress：当用户按下并保持按键时触发。
  • onkeyup：当用户松开键盘上的键时触发。
• 表单事件：
  • onchange：当元素的值改变时触发。
  • onfocus：当元素获得焦点时触发。
  • onblur：当元素失去焦点时触发。
  • onsubmit：当表单提交时触发。
  • onreset：当表单重置时触发。
• 窗口事件：
  • onload：当页面加载完成时触发。
  • onunload：当页面卸载时触发。
  • onresize：当窗口大小改变时触发。
  • onscroll：当页面滚动时触发。

事件处理：

在 JavaScript 中，您可以通过以下方式为元素添加事件处理程序：

• HTML 属性：

  <button onclick="alert('按钮被点击！')">点击我</button>

• DOM 0 级事件处理：

  var button = document.getElementById("myButton");
  button.onclick = function() {
    alert('按钮被点击！');
  };

• DOM 2 级事件处理：

  var button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    alert('按钮被点击！');
  });

需要注意的是，DOM 2 级事件处理方法（addEventListener）支持多个事件处理程序，而 DOM 0 级事件处理方法（直接赋值）会覆盖之前的事件处理程序。

更多关于 HTML DOM 事件的详细信息，请参考 菜鸟教程。