进阶-事件

　

在JavaScript中，事件是指用户在网页上执行的交互操作，如点击、鼠标移动、键盘输入等。通过事件，可以在网页中捕获和响应用户的行为

1. 事件类型（Event Types）： 事件可以分为不同的类型，每种类型对应不同的用户交互行为。常见的事件类型包括：

• click：当用户点击鼠标时触发。
• mouseover：当鼠标指针移动到元素上时触发。
• keydown：当用户按下键盘上的任意键时触发。
• submit：当用户提交表单时触发。
• load：当页面或资源加载完成时触发。

1. click： 当用户点击鼠标时触发。click事件常用于捕获按钮点击、链接点击等用户交互操作。

let button = document.querySelector("#myButton");

button.addEventListener("click", function() {
  console.log("按钮被点击了！");
});

　　

2. mouseover： 当鼠标指针移动到元素上时触发。mouseover事件常用于实现当鼠标悬停在元素上时显示额外信息或效果的操作。

let element = document.querySelector("#myElement");

element.addEventListener("mouseover", function() {
  console.log("鼠标移动到元素上了！");
});

　　

3. keydown： 当用户按下键盘上的任意键时触发。keydown事件常用于捕获用户的键盘输入操作，如检测特定的按键或响应组合键。

document.addEventListener("keydown", function(event) {
  console.log("按下了键：" + event.key);
});

　　

4. submit： 当用户提交表单时触发。submit事件常用于在表单提交之前执行一些验证操作或提交数据到服务器。

 

let form = document.querySelector("#myForm");

form.addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为
  console.log("表单已提交！");
});

　　

5. load： 当页面或资源加载完成时触发。load事件常用于在页面或资源加载完成后执行一些初始化操作或显示内容。

window.addEventListener("load", function() {
  console.log("页面加载完成！");
});