HTML DOM - 事件

HTML DOM（文档对象模型）是一种用来操作HTML文档的编程接口。在HTML DOM中，事件是发生在HTML元素上的行为，比如单击鼠标、按下键盘等操作。当用户触发一个事件，浏览器就会调用已经注册了该事件的函数。

事件流

HTML DOM定义了事件流，它描述了从事件被触发到被处理的一系列过程。事件可以在捕获阶段或冒泡阶段被处理。捕获阶段是指从文档根节点到事件触发的元素，冒泡阶段是指从事件触发的元素到文档根节点。默认情况下，事件是在冒泡阶段处理的。可以通过 event.stopPropagation() 方法来阻止事件冒泡。

事件类型

HTML DOM定义了许多事件类型，比如单击、双击、鼠标移动等。下面列出了一些常见的事件类型：

  • click：用户在元素上单击鼠标（移动设备上为轻触）
  • dblclick：用户在元素上双击鼠标（移动设备上为双指轻触）
  • mouseover：鼠标移到元素上时触发
  • mouseout：鼠标从元素上移开时触发
  • mousedown：鼠标按下时触发
  • mouseup：鼠标松开时触发
  • keydown：按下键盘时触发
  • keyup：松开键盘时触发
  • focus：元素获得焦点时触发
  • blur：元素失去焦点时触发
  • load：页面或图片加载完成时触发
  • resize：浏览器窗口大小改变时触发

事件属性

在HTML DOM中，事件是将某种操作和回调函数绑定在元素上的。事件还有一些特定的属性，可以在回调函数中获取事件的一些信息。下面列出了一些常见的事件属性：

  • event.target：事件发生的目标元素
  • event.type：事件类型
  • event.pageX / event.pageY：鼠标指针相对于文档左上角的x、y坐标
  • event.keyCode：按下的键盘按键的字符编码
  • event.which：按下的键盘按键的ASCII码
  • event.preventDefault()：取消事件的默认行为
  • event.stopPropagation()：停止事件冒泡

注册事件

在HTML DOM中，可以使用 addEventListener() 方法来注册事件。它接受三个参数：事件类型、回调函数和一个布尔值，表示是否在捕获阶段处理事件。

例如在以下代码中，当用户单击按钮时，会调用 changeText() 函数：

<button id="myButton">Click me</button>

<script>
  document.getElementById("myButton").addEventListener("click", changeText);

  function changeText() {
    document.getElementById("myButton").innerHTML = "Clicked!";
  }
</script>

移除事件

可以使用 removeEventListener() 方法来移除事件。它接受与 addEventListener() 方法相同的参数。注意，在移除事件时，回调函数必须是一个命名函数，而不是匿名函数。

例如在以下代码中，当用户单击按钮时，会调用 changeText() 函数。在第5行代码中，移除了这个事件处理程序：

<button id="myButton">Click me</button>

<script>
  document.getElementById("myButton").addEventListener("click", changeText);

  function changeText() {
    document.getElementById("myButton").innerHTML = "Clicked!";
    document.getElementById("myButton").removeEventListener("click", changeText);
  }
</script>

小结

HTML DOM中的事件是在元素上发生的行为。开发人员可以通过注册事件来执行某些操作，也可以获取事件的属性来处理事件。在移除事件时，需要记住回调函数必须是一个命名函数。通过HTML DOM的事件机制，开发人员可以实现基于交互的动态web应用程序。

htmldom教程 HTML DOM - 修改