以下是一些常见的DOM事件案例，涵盖了鼠标事件、键盘事件、表单事件、窗口事件等：
1. 鼠标事件
• 点击事件（click）：
【javascript】
document.getElementById('myButton').addEventListener('click', function() {
alert('Button clicked!');
});
• 鼠标移入事件（mouseover）：
【javascript】
document.getElementById('myDiv').addEventListener('mouseover', function() {
this.style.backgroundColor = 'yellow';
});
• 鼠标移出事件（mouseout）：
【javascript】
document.getElementById('myDiv').addEventListener('mouseout', function() {
this.style.backgroundColor = '';
});
2. 键盘事件
• 按键按下事件（keydown）：
【javascript】
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
alert('Enter key pressed!');
}
});
• 按键抬起事件（keyup）：
【javascript】
document.getElementById('myInput').addEventListener('keyup', function() {
console.log('Input value:', this.value);
});
3. 表单事件
• 表单提交事件（submit）：
【javascript】
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
alert('Form submitted!');
});
• 输入框变化事件（input）：
【javascript】
document.getElementById('myInput').addEventListener('input', function() {
console.log('Input value changed:', this.value);
});
4. 窗口事件
• 窗口加载事件（load）：
【javascript】
window.addEventListener('load', function() {
console.log('Window loaded!');
});
• 窗口调整大小事件（resize）：
【javascript】
window.addEventListener('resize', function() {
console.log('Window resized to:', window.innerWidth, window.innerHeight);
});
5. 拖拽事件
• 拖拽开始事件（dragstart）：
【javascript】
document.getElementById('myDraggable').addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', event.target.id);
});
• 拖拽进入目标事件（dragenter）：
【javascript】
document.getElementById('myDropzone').addEventListener('dragenter', function(event) {
event.preventDefault();
this.style.border = '3px solid blue';
});
• 拖拽离开目标事件（dragleave）：
【javascript】
document.getElementById('myDropzone').addEventListener('dragleave', function() {
this.style.border = '';
});
• 拖拽放置事件（drop）：
【javascript】
document.getElementById('myDropzone').addEventListener('drop', function(event) {
event.preventDefault();
var data = event.dataTransfer.getData('text');
alert('Dropped data:', data);
});
这些事件案例展示了如何在JavaScript中处理各种DOM事件，从而增强用户交互体验。你可以根据实际需求，将这些事件应用到你的项目中。
想快速掌握Flask Web开发，并在统信 UOS上大放异彩吗？这本实战宝典就是你的不二之选！从基础到进阶，从理论到实践，全方位助你征服Flask开发领域。别等了，立刻开启你的Web开发新篇章！