js常用事件演示

为什么要使用js事件：

JavaScript事件是非常重要的，因为它们提供了与用户交互和处理用户操作的能力。以下是一些使用JavaScript事件的原因：

1. 交互性：使用JavaScript事件可以实现各种交互功能，例如点击按钮、移动鼠标、按下键盘等操作。通过响应这些事件，可以改变元素的样式、执行特定的功能或触发其他操作。

2. 动态性：通过监听事件，可以在特定的情况下执行一些特定的代码。这使得网页可以根据用户的行为实时地做出反应，而不需要刷新整个页面。

3. 表单验证：通过使用表单提交事件，可以对用户的输入进行验证。通过监听表单提交前的事件，可以在提交之前对用户的输入进行检查，从而确保输入的有效性。

4. 页面加载和资源加载：JavaScript事件还可以用于监测页面和资源的加载状态。通过监听页面加载完成事件，可以在页面完全加载后执行特定的操作，例如初始化页面数据或加载其他资源。

5. 响应式设计：通过监听窗口大小变化事件，可以实现响应式设计。这样，当用户调整窗口大小时，网页可以根据不同的屏幕尺寸做出相应的调整。

总而言之，JavaScript事件为网页提供了与用户交互和处理用户操作的能力，使得网页更加动态、交互性和响应式。

以下是常用的事件示例：

1. 点击事件

document.getElementById("myButton").addEventListener("click", function(){
  alert("按钮被点击了！");
});

2. 鼠标移入和移出事件

var myDiv = document.getElementById("myDiv");

myDiv.addEventListener("mouseenter", function(){
  this.style.backgroundColor = "red";
});

myDiv.addEventListener("mouseleave", function(){
  this.style.backgroundColor = "white";
});

3. 键盘按下事件

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

4. 表单提交事件

document.getElementById("myForm").addEventListener("submit", function(event){
  event.preventDefault();
  var name = document.getElementById("nameInput").value;
  alert("姓名为：" + name);
});

5. 页面加载完成事件

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

这些只是一些常见的JavaScript事件，还有许多其他事件，可以根据具体需求进行使用。