1. 鼠标事件：
- click： 当鼠标单击元素时触发。
element.addEventListener('click', function() {
// 处理单击事件的代码
});
- mouseover 和 mouseout： 当鼠标移入或移出元素时触发。
element.addEventListener('mouseover', function() {
// 处理鼠标移入事件的代码
});
element.addEventListener('mouseout', function() {
// 处理鼠标移出事件的代码
});
2. 键盘事件：
- keydown、keyup 和 keypress： 当用户按下、释放或按住键盘上的键时触发。
document.addEventListener('keydown', function(event) {
// 处理按键按下事件的代码
});
document.addEventListener('keyup', function(event) {
// 处理按键释放事件的代码
});
document.addEventListener('keypress', function(event) {
// 处理按键按住事件的代码
});
3. 表单事件：
- submit： 当表单提交时触发。
formElement.addEventListener('submit', function(event) {
// 处理表单提交事件的代码
event.preventDefault(); // 阻止表单默认提交行为
});
- change： 当表单元素的值发生改变时触发（用于输入框、下拉框等）。
inputElement.addEventListener('change', function() {
// 处理值改变事件的代码
});
4. 窗口事件：
- resize： 当浏览器窗口大小发生改变时触发。
window.addEventListener('resize', function() {
// 处理窗口大小改变事件的代码
});
- load： 当页面及其所有资源加载完成时触发。
window.addEventListener('load', function() {
// 处理页面加载完成事件的代码
});
5. 其他常见事件：
- focus 和 blur： 当元素获得或失去焦点时触发（常用于表单元素）。
- scroll： 当页面滚动时触发。
inputElement.addEventListener('focus', function() {
// 处理获得焦点事件的代码
});
inputElement.addEventListener('blur', function() {
// 处理失去焦点事件的代码
});
window.addEventListener('scroll', function() {
// 处理滚动事件的代码
});
6. 事件委托：
通过在父元素上监听事件，然后通过事件对象判断具体触发事件的子元素。
parentElement.addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
// 处理按钮被点击事件的代码
}
});
以上是一些常见的 JavaScript 事件及其处理方式。事件是Web开发中非常重要的概念，通过合理利用事件，你可以实现页面的交互性和动态性。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12783/JavaScript