在JavaScript中，事件是用户和浏览器之间交互的桥梁。当某些特定的事情发生时（如用户点击按钮、鼠标移动、页面加载等），浏览器会触发相应的事件。这些事件可以被JavaScript代码捕获，并允许开发者执行某些操作。以下是一些常见的JavaScript事件及其代码示例：
1.点击事件 (click)
当用户点击某个元素时触发。
// 获取元素 |
|
var button = document.getElementById('myButton'); |
// 为元素添加点击事件监听器 |
|
button.addEventListener('click', function() { |
|
alert('按钮被点击了！'); |
|
}); |
2.鼠标移动事件 (mousemove, mouseover, mouseout)
当鼠标指针在元素内部移动时触发 mousemove；当鼠标指针进入元素时触发 mouseover；当鼠标指针离开元素时触发 mouseout。
var element = document.getElementById('myElement'); |
|
element.addEventListener('mousemove', function(event) { |
console.log('鼠标在元素内移动，当前位置：', event.clientX, event.clientY); |
|
}); |
|
element.addEventListener('mouseover', function() { |
|
|
}); |
|
element.addEventListener('mouseout', function() { |
console.log('鼠标离开了元素'); |
|
}); |
3.键盘事件 (keydown, keyup, keypress)
当用户按下、释放或按住键盘上的键时触发。
|
|
console.log('按下了键：', event.key); |
|
}); |
document.addEventListener('keyup', function(event) { |
|
console.log('释放了键：', event.key); |
|
}); |
document.addEventListener('keypress', function(event) { |
|
console.log('按住了键：', event.key); |
|
}); |
4.表单事件 (submit, focus, blur)
当表单提交时触发 submit；当元素获得焦点时触发 focus；当元素失去焦点时触发 blur。
var form = document.getElementById('myForm'); |
form.addEventListener('submit', function(event) { |
|
event.preventDefault(); // 阻止表单的默认提交行为 |
|
console.log('表单被提交了'); |
|
}); |
var input = document.getElementById('myInput'); |
|
input.addEventListener('focus', function() { |
|
console.log('输入框获得了焦点'); |
|
}); |
input.addEventListener('blur', function() { |
|
console.log('输入框失去了焦点'); |
|
}); |
5.加载事件 (load)
当页面或图片加载完成时触发。
window.addEventListener('load', function() { |
|
console.log('页面加载完成'); |
|
}); |
var img = document.getElementById('myImage'); |
|
img.addEventListener('load', function() { |
|
console.log('图片加载完成'); |
|
}); |
6.滚动事件 (scroll)
当用户滚动页面时触发。
window.addEventListener('scroll', function() { |
|
console.log('页面滚动位置：', window.scrollY); |
|
}); |
7.触摸事件 (touchstart, touchmove, touchend)
在触摸屏设备上触发，当用户触摸、移动或停止触摸屏幕时。
var element = document.getElementById('myElement'); |
element.addEventListener('touchstart', function(event) { |
|
console.log('触摸开始', event.touches); |
|
}); |
element.addEventListener('touchmove', function(event) { |
|
console.log('触摸移动', event.touches); |
|
}); |
element.addEventListener('touchend', function(event) { |
|
console.log('触摸结束', event.changedTouches); |
|
}); |
这些只是JavaScript事件的一小部分。在实际开发中，你可能会遇到更多特定于应用或库的事件。请注意，当使用事件监听器时，要确保在不再需要它们时移除它们，以防止内存泄漏。可以通过调用监听器对象的 removeEventListener 方法来实现这一点。
