JS Events 常见事件

JavaScript 中的事件是网页或用户与网页交云时发生的不同类型的动作，常见的事件可以针对页面加载、用户输入、鼠标操作和其他一些交互进行响应。这里列出了一些常见的 JavaScript 事件：

窗口事件(Window Events)

• load: 当页面完全加载后触发，包括所有的 DOM、JS 脚本、图片等资源。
• unload: 当页面被卸载时触发。
• resize: 当窗口大小被调整时触发。
• scroll: 当用户滚动页面时触发。
• beforeunload: 当离开页面之前触发的一个事件。

鼠标事件(Mouse Events)

• click: 用户点击元素时触发。
• dblclick: 用户双击元素时触发。
• mousedown: 用户按下鼠标按键时触发。
• mouseup: 用户释放鼠标按键时触发。
• mousemove: 鼠标在元素上移动时持续触发。
• mouseenter: 鼠标移到元素上方时触发（不冒泡）。
• mouseleave: 鼠标从元素上方移开时触发（不冒泡）。
• mouseover: 鼠标移到元素上方时触发（冒泡）。
• mouseout: 鼠标从元素上方移开时触发（冒泡）。

键盘事件(Keyboard Events)

• keydown: 用户按下键盘上的任意键时触发，按住不放会重复触发。
• keypress: 用户按下键盘上的字符键时触发，按住不放会重复触发（在新标准中已弃用，不建议使用）。
• keyup: 用户释放键盘上的键时触发。

表单事件(Form Events)

• submit: 当表单提交时触发。
• change: 当表单元素的内容改变时触发。
• focus: 当元素获得焦点时触发。
• blur: 当元素失去焦点时触发。
• input: 当 <input>、<select> 或 <textarea> 元素的值发生变化时触发。

触摸事件(Touch Events)

• touchstart: 用户开始触摸屏幕时触发。
• touchmove: 用户手指在屏幕上滑动时触发。
• touchend: 用户手指离开屏幕时触发。
• touchcancel: 当触摸事件被中断时触发，例如突然来电话。

编辑事件

• copy
• selectstart
• contextmenu

// 禁止页面复制
​​document.body.oncopy=function() { return false;}
// 禁止页面内容被选取
​​document.body.onselectstart=function() { return false;}
// 禁止页面使用鼠标右键
​​document.body.oncontextmenu=function() { return false;}​​

其他事件

• contextmenu: 当用户尝试打开上下文菜单（通常通过右键单击）时触发。
• error: 当发生 JavaScript 错误时触发。
• DOMContentLoaded: 当初始的 HTML 文档被完全加载和解析完成后触发，不需等待样式表、图像和子框架的加载完成。

示例代码

下面是一个简单的例子说明如何在 JavaScript 中使用部分事件：

// 鼠标点击事件
document.getElementById("myButton").onclick = function () {
  alert("Button clicked!");
};
 
// 页面加载完成事件
window.onload = function () {
  console.log("Page loaded!");
};
 
// 表单提交事件
document.getElementById("myForm").onsubmit = function () {
  console.log("Form submitted!");
};
 
// 输入框内容改变事件
document.getElementById("myInput").onchange = function () {
  console.log("Input changed!");
};