JavaScript - DOM 事件
DOM 事件是在 HTML 元素上可以执行的操作。当事件发生时，它会触发一个 JavaScript function。此 function 随后可用于更改 HTML 元素或执行其他操作。
以下是一些 DOM 事件的示例：
Click − 当用户点击 HTML 元素时，此事件发生。
Load − 当 HTML 元素加载时，此事件发生。
Change − 当 HTML 元素的 value 更改时，此事件发生。
Submit − 当 HTML form 提交时，此事件发生。
您可以使用 event handlers 或 addEventListener() method 来监听并响应 DOM 事件。addEventListener() method 接受两个参数：事件名称以及当事件发生时要调用的 function。
DOM 事件也被称为 Document Object Model 事件。它用于在事件发生时与 DOM 元素交互并从 JavaScript 中操作 DOM 元素。
让我们来看看下面的 DOM 事件示例。
The onclick Event Type
这是最常用的 event type，当用户点击鼠标左键时发生。您可以针对此 event type 添加验证、警告等。
Example
尝试以下示例。
<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>
The ondblclick Event Type
我们在下面的代码中使用 'ondblclick' event handler 与
在 changeColor() function 中，我们更改文本的颜色。因此，当用户双击按钮时，代码会更改文本的颜色。
Example
<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>
The onkeydown Event Type
我们在下面的代码中使用 'keydown' event 与 <input> element 结合。每当用户按下任意键时，它会调用 customizeInput() function。
在 customizeInput() function 中，我们将 input 的背景颜色和输入文本更改为红色。
Example
<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>