HTML | DOM 页面转换事件(1)

📌 相关文章

📜 HTML | DOM 页面转换事件(1)

📅 最后修改于: 2023-12-03 15:31:14.928000 🧑 作者: Mango

HTML | DOM 页面转换事件

HTML页面上不同的元素和组件可以绑定事件，这些事件可以是用户交互触发的，也可以是其他组件或脚本触发的。DOM（文档对象模型）API为程序员提供了一系列处理这些事件的方法和属性。

DOM 事件模型

DOM 事件模型分为三个阶段：捕获阶段（Capturing phase）、目标阶段（Target phase）和冒泡阶段（Bubbling phase）。在目标元素上触发的事件，会首先在捕获阶段从父元素向下依次传递，然后到达目标元素，触发目标阶段的事件，最后在冒泡阶段从目标元素向上依次传递到父元素。

HTML 上的事件

在HTML元素上绑定事件可以使用以下两种方式：

直接在HTML标签上使用on-attribute属性，例如：

<button onclick="alert('Hello World!')">Click me</button>

在JS中通过DOM API查找元素，然后显式绑定事件，例如：

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

<script>
  const button = document.getElementById('myButton')
  button.addEventListener('click', () => alert('Hello World!'))
</script>

DOM API

DOM API为程序员提供了一系列方法和属性来查询元素、绑定事件和处理事件。下面是一些常用的方法和属性：

document.getElementById(id)：查找指定id的元素
element.addEventListener(type, listener [, options])：为指定元素绑定事件
event.target：获取事件的目标元素
event.preventDefault()：阻止事件的默认行为
event.stopPropagation()：停止事件从父元素向下或从子元素向上的传播

示例

下面是一个示例，演示如何使用DOM API处理鼠标点击事件和键盘事件：

<!DOCTYPE html>
<html>
<head>
  <title>Event Handling</title>
</head>
<body>
  <h1>Event Handling</h1>
  <p>Click the button below, or press the space bar, to toggle the class of the text.</p>
  <button id="toggleButton">Toggle Class</button>
  <p id="text" class="highlighted">This text can be highlighted or not.</p>
  <script>
    const toggleButton = document.getElementById('toggleButton')
    const text = document.getElementById('text')
    
    toggleButton.addEventListener('click', () => {
      text.classList.toggle('highlighted')
    })
    
    document.addEventListener('keydown', (event) => {
      if (event.code === 'Space') {
        text.classList.toggle('highlighted')
        event.preventDefault()
      }
    })
  </script>
  <style>
    .highlighted {
      background-color: yellow;
    }
  </style>
</body>
</html>

在这个示例中，当用户单击“Toggle Class”按钮或者按下空格键时，程序会切换文本的高亮效果。同时，为了防止按空格键时发生滚动事件，必须调用preventDefault()来阻止事件的默认行为。

结论

DOM API提供了丰富的方法和属性来处理HTML页面上的事件。熟练掌握DOM API可以让程序员更方便地实现各种交互效果和动态效果。