如何在HTML中处理JavaScript事件

事件是软件识别的动作或事件。它可以由用户或系统触发。大多数事件被用于按钮、超链接、悬停、页面加载等。所有这些都是通过事件处理程序来处理的。

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

语法：

在HTML中处理事件：

<element onclick="myScript">

各种HTML事件属性：

表单事件

onblur： 当一个对象失去焦点时触发此事件。

<element onblur="myScript">

onchange： 当元素的值已更改时触发此事件。

<element onchange="myScript">

onfocus： 当元素获取焦点时触发此事件。

<element onfocus="myScript">

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

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <input type="text" name="blur" id="blur" 
            onblur="BlurFunction()" 
            placeholder="Enter Name" /> 
        <br /><br /> 
  
        <select id="course" onchange="OnChangeFunction()"> 
            <option value="Competitive Programming"> 
                Competitive Programming 
            </option> 
  
            <option value="Operating System"> 
                Operating System 
            </option> 
  
            <option value="Web Development"> 
                Web Development 
            </option> 
  
            <option value="Android Development"> 
                Android Development 
            </option> 
        </select> 
  
        <p id="demo"></p> 
        <br /><br /> 
  
        <input type="text" id="focus" 
            onfocus="FocusFunction(this.id)" 
                placeholder="Enter Your Semester" /><br /> 
    </center> 
  
    <script> 
        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"; 
        } 
    </script> 
</body> 
  
</html>

输出：

如何在HTML中处理JavaScript事件

事件

onclick： 用户单击元素时触发此事件。

<element onclick="myScript">

onmouseover： 用户将鼠标悬停在元素上时触发此事件。

<element onmouseover="myScript">

示例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
          
        <button onclick="OnClickFunction()"> 
            Click me 
        </button> 
          
        <p id="demo"></p> 
        <br /><br /> 
  
        <p onmouseover="MouseHover()"> 
            Hover Mouse Here 
        </p> 
    </center> 
  
    <script> 
        function OnClickFunction() { 
            document.getElementById("demo") 
                .innerHTML = "GeeksforGeeks"; 
        } 
  
        function MouseHover() { 
            alert("Mouse move over"); 
        } 
    </script> 
</body> 
  
</html>

输出：

如何在HTML中处理JavaScript事件