JavaScript - DOM 事件

DOM 事件是可对 HTML 元素执行的操作。事件发生时，会触发 JavaScript 函数。该函数可用于更改 HTML 元素或执行其他操作。

以下是一些 DOM 事件的示例:

• Click - 用户点击 HTML 元素时发生此事件。

• Load - HTML 元素加载时发生此事件。

• Change - HTML 元素的值更改时发生此事件。

• Submit - HTML 表单提交时发生此事件。

您可以使用事件处理程序或 addEventListener() 方法来监听和响应 DOM 事件。 addEventListener() 方法接受两个参数:事件名称和事件发生时调用的函数。

DOM 事件也称为文档对象模型事件。它用于与 DOM 元素交互，并在任何事件发生时通过 JavaScript 操作 DOM 元素。

让我们看看以下 DOM 事件的示例。

onclick 事件类型

这是最常用的事件类型，当用户点击鼠标左键时发生。您可以针对此事件类型添加验证、警告等功能。

示例

尝试以下示例。

<html>
<head>   
   <script>
	  function sayHello() {
		 alert("Hello World")
	  }
   </script>      
</head>   
<body>
   <p>Click the following button and see result</p>      
   <form>
	  <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </form>      
</body>
</html>

ondblclick 事件类型

在下面的代码中，我们将 'ondblclick' 事件处理程序与 元素结合使用。当用户双击按钮时，它会调用 changeColor() 函数。

在 changeColor() 函数中，我们更改了文本的颜色。因此，当用户双击按钮时，代码将会改变文本的颜色。

示例

<html>
<body>
   <h2 id = "text"> Hi Users! </h2>
   <button ondblclick="changeColor()"> Double click me! </button>
   <script>
      function changeColor() {
         document.getElementById("text").style.color = "red";
     }
   </script>
</body>
</html>

onkeydown 事件类型

在下面的代码中，我们在 <input> 元素中使用了 'keydown' 事件。每当用户按下任意键时，它都会调用 customizeInput() 函数。

在 customizeInput() 函数中，我们将输入框的背景颜色和输入文本更改为红色。

示例

<html>
<body>
   <p> Enter charater/s by pressing any key  </p>
   <input type = "text" onkeydown = "customizeInput()">
   <script>
      function customizeInput() {
         var ele = document.getElementsByTagName("INPUT")[0];
         ele.style.backgroundColor = "yellow";
         ele.style.color = "red";
      }
   </script>
</body>