如何使用 DOM 和事件？

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

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

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

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

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

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

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

HTML

DOM and Events
  
    .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;
        }
  

  
    GeeksforGeeks
    
        let container = document.querySelector('.container');
        container.addEventListener('click', function(e) {
            container.style.color = "black";
        });
      

输出：

示例 2：在此示例中，发生了一个键盘事件，我们在输入元素上附加了一个事件监听器。当用户按下“Enter”键时，会向用户显示一条消息提示，说“You Pressed an Enter”。

HTML

  

    DOM and Events
    
        * {
            font-family: -apple-system, BlinkMacSystemFont,
              'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 
              'Open Sans', 'Helvetica Neue', sans-serif;
        }
    

  

    
        Message will be displayed when 
        you press a Enter key
    
  
    
    
  
    
        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";
            }
        })
    

  

输出：