HTML 如何使用DOM和事件

DOM (文档对象模型)是一个编程接口，用于通过表示文档结构（如HTML文档）来将web页面连接到脚本。它定义了访问和操作文档的方式，还定义了文档的逻辑结构。

DOM表示文档的方式是使用逻辑树（DOM树）。

为了为web页面提供动态界面，我们在JavaScript中使用事件。这些事件附加到DOM（文档对象模型）中的元素上。默认情况下，事件使用冒泡传播，即从子元素到父元素。事件可以绑定为内联方式或在外部脚本（JavaScript文件）中。

使用DOM和事件： 假设我们希望在某个事件上对文档或样式表进行更改。该事件可以是网页加载、选择任何特定元素或提交表单等。

一些常见的事件属性如下：

窗口事件属性： 这些事件是在窗口对象上触发的。
- onload： 页面加载完成后触发。
- onresize： 浏览器窗口改变大小时触发。
鼠标事件： 这些是用户通过鼠标进行基本交互的最常见事件。
- onclick： 在元素上触发鼠标点击时触发。
- onmouseover： 在鼠标指针移动到元素上方时触发。
- ondblclick： 在元素上进行鼠标双击时触发。
键盘事件：
- onkeydown： 当用户按下特定键时触发。
- onkeyup： 当用户释放特定键时触发。

示例1： 在此示例中，我们将一个事件监听器附加到容器上。当发生点击事件时，容器内的文本颜色从白色变为黑色。

HTML

<!DOCTYPE html> 
<html> 
<head> 
<title>DOM and Events</title> 
  <style> 
    .container { 
            height: 150px; 
            width: 300px; 
            background-color: green; 
            text-align: center; 
            color: white; 
            font-size: 30px; 
            margin: auto; 
            font-weight: bolder; 
            font-family: -apple-system, BlinkMacSystemFont, 
                        'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 
                        'Open Sans', 'Helvetica Neue', sans-serif; 
        } 
  </style> 
</head> 
<body>   
    <div class="container">GeeksforGeeks</div> 
    <script> 
        let container = document.querySelector('.container'); 
        container.addEventListener('click', function(e) { 
            container.style.color = "black"; 
        }); 
    </script>   
</body> 
</html>

输出:

HTML 如何使用DOM和事件

示例2： 在这个示例中，正在发生一个键盘事件，我们正在将一个事件监听器附加到我们的输入元素上。当用户按下”Enter”键时，会向用户显示一个消息提示，上面写着”您按下了Enter键”。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM and Events</title> 
    <style> 
        * { 
            font-family: -apple-system, BlinkMacSystemFont, 
              'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,  
              'Open Sans', 'Helvetica Neue', sans-serif; 
        } 
    </style> 
</head> 
  
<body> 
    <h3> 
        Message will be displayed when  
        you press a Enter key 
    </h3> 
  
    <input type="text" class="inputArea"> 
    <p></p> 
  
    <script> 
        let input = document.querySelector(".inputArea"); 
        let p = document.querySelector("p"); 
        
        input.addEventListener('keydown', function(e) { 
            if (e.keyCode == 13) { 
                p.textContent = "You pressed an Enter"; 
            } 
        }) 
    </script> 
</body> 
  
</html>

输出：

HTML 如何使用DOM和事件