js常用事件

一、什么是事件

我们对网页进行的种种操作，如鼠标点击，页面滚动；

而js通过捕获这些事件来触发特定的操作；

二、网页常见的事件

以下是一些常见的JavaScript事件：

• 点击事件（onclick）：当用户点击某个元素时触发。
• 鼠标移动事件（onmousemove）：当用户在某个元素上移动鼠标时触发。
• 鼠标悬停事件（onmouseover）：当用户将鼠标悬停在某个元素上时触发。
• 键盘按下事件（onkeydown）：当用户按下键盘上的任意键时触发。
• 表单提交事件（onsubmit）：当用户提交表单时触发。
• 页面加载事件（onload）：当网页加载完成时触发。
• 元素失去焦点事件（onblur）：当元素失去焦点时触发。
• 元素获得焦点事件（onfocus）：当元素获得焦点时触发

示例 

1、onclick

<input type="button" onclick="alert('事件触发')" value="按钮">

点击按钮触发事件

2、onmousemove和onmouseover

onmousemove和onmouseover在在作用上基本相同，而onmouseover 只在刚进入区域时触发。onmousemove 除了刚进入区域触发外，在区域内移动鼠标，也会触发该事件。

<input type="button"
onmousemove="document.getElementById('cs').style.backgroundColor='red'"
value="按钮" id="cs">

悬浮于按钮之上触发事件

3、onsubmit

<form id="myForm">
   <input type="text" name="username" placeholder="请输入用户名">
   <input type="password" name="password" placeholder="请输入密码">
   <input type="submit" value="提交">
</form>

document.getElementById("myForm").addEventListener("submit", function(event) {
   event.preventDefault(); // 阻止表单默认的提交行为
 
   // 获取表单输入的值
   var username = document.querySelector('input[name="username"]').value;
   var password = document.querySelector('input[name="password"]').value;
 
   // 执行表单提交时的操作
   console.log("用户名：" + username);
   console.log("密码：" + password);
});

点击表单的提交按钮时触发的事件,可以使用submit事件来监听表单提交动作并执行相应的操作