如何处理 HTML 中的 JavaScript 事件？

事件是软件识别的动作或事件。它可以由用户或系统触发。事件主要用于按钮、超链接、悬停、页面加载等。所有这些都在事件处理程序的帮助下生效（处理）。

在本文中，您将了解不同类型的 HTML 事件处理程序属性。基本上，要处理 HTML 中的事件，您只需要在 HTML 标记中添加函数，当触发或触发 HTML 中的任何事件时，该函数将在 JavaScript 中执行。 HTML 中有很多事件属性，如键盘事件、鼠标事件、表单事件等，简要讨论。

句法：

处理 HTML 中的事件：

各种 HTML 事件属性：

表单事件

• 模糊： 当对象失去焦点时发生此事件。

• onchange：当元素的值发生变化时发生此事件。

• onfocus：当元素获得焦点时发生此事件。

示例 1：当用户从select标记中选择按钮时，将触发 onchange() 事件，然后调用存在于 JavaScript 中的OnChangeFunction() 。因此 HTML 中定义的事件处理程序可以调用脚本中定义的函数

HTML

  

    
        
            GeeksforGeeks
        
  
        
        
  
        
            
                Competitive Programming
            
  
            
                Operating System
            
  
            
                Web Development
            
  
            
                Android Development
            
        
  
        
        
  
        
    
  
    
        function BlurFunction() {
            let x = document.getElementById("blur");
            x.value = x.value.toUpperCase();
        }
  
        function OnChangeFunction() {
            let x = document.getElementById("course").value;
            document.getElementById("demo")
                .innerHTML = "You selected: " + x;
        }
  
        function FocusFunction(x) {
            document.getElementById(x)
                .style.background = "green";
        }
    

  

输出：

模糊、聚焦和改变

事件

• onclick：当用户单击元素时发生此事件。

• 鼠标悬停： 当用户将鼠标指针悬停在元素上时会发生此事件。

示例 2：

HTML

  

    
        
            GeeksforGeeks
        
          
        
            Click me
        
          
        
        
  
        
            Hover Mouse Here
        
    
  
    
        function OnClickFunction() {
            document.getElementById("demo")
                .innerHTML = "GeeksforGeeks";
        }
  
        function MouseHover() {
            alert("Mouse move over");
        }
    

  

输出：

鼠标移到

在上面的输出中，“单击我”按钮调用OnClickFunction() 单击时函数。 OnClickFunction()是在单独的