📅 最后修改于: 2023-12-03 15:01:12.337000 🧑 作者: Mango
在Web开发中，常常需要通过用户交互来切换不同的视图或状态，为此HTML提供了多种切换事件。
点击事件是最常用的交互事件之一，可以在鼠标单击HTML元素时触发。
<button onclick="alert('Hello World!')">Click me</button>
上面的代码创建了一个按钮，在按钮被点击时会弹出一个Hello World的提示框。
也可以通过JavaScript来添加点击事件：
<button id="myButton">Click me</button>
<script>
const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
alert('Hello World!');
});
</script>
上面的代码通过querySelector方法找到按钮，然后添加一个点击事件监听。
鼠标移入/移出事件分别在鼠标进入或者离开HTML元素时触发。
<button onmouseover="alert('Mouse over!')" onmouseout="alert('Mouse out!')">Hover me</button>
上面的代码创建了一个按钮，在鼠标移入和移出时会弹出不同的提示框。
同样，也可以通过JavaScript来添加这两个事件：
<button id="myButton">Hover me</button>
<script>
const button = document.querySelector('#myButton');
button.addEventListener('mouseover', function() {
alert('Mouse over!');
});
button.addEventListener('mouseout', function() {
alert('Mouse out!');
});
</script>
改变事件在用户修改HTML表单（如输入框、下拉框等）内容时触发。
<input type="text" onchange="alert('Changed!')">
上面的代码创建了一个文本框，在文本框内容改变时会弹出一个提示框。
同样，也可以通过JavaScript来添加这个事件：
<input type="text" id="myInput">
<script>
const input = document.querySelector('#myInput');
input.addEventListener('change', function() {
alert('Changed!');
});
</script>
加载事件在HTML元素完成加载时触发，通常用来执行初始化代码。
<body onload="console.log('Loaded!')">
<!-- HTML content here -->
</body>
上面的代码在页面加载完毕时会在控制台输出Loaded。
同样，也可以通过JavaScript来添加这个事件：
<script>
window.addEventListener('load', function() {
console.log('Loaded!');
});
</script>
HTML还提供多种其他的切换事件，如双击事件（ondblclick）、键盘按下事件（onkeydown）、提交事件（onsubmit）等。
<button ondblclick="alert('Double clicked!')">Double click me</button>
<input type="text" onkeydown="console.log('Key pressed!')">
<form onsubmit="alert('Form submitted!')">
<input type="text">
<button type="submit">Submit</button>
</form>
同样，也可以通过JavaScript来添加这些事件。
HTML提供了多种切换事件，可以帮助程序员实现交互效果和状态变化。使用这些事件可以使Web应用更加丰富和有趣。