事件处理
事件处理是用户交互的核心机制，通过监听和响应用户操作来实现动态交互效果。
常见事件类型
| 事件类别 | 具体事件 | 应用场景 |
|---|---|---|
| 鼠标事件 | click点击、dblclick双击、mouseover悬停、mouseout离开、mousedown按下、mouseup释放 | 按钮点击、菜单展开、悬停效果 |
| 键盘事件 | keydown按键按下、keyup按键释放、keypress按键按下并释放 | 快捷键、输入验证、游戏控制 |
| 表单事件 | submit提交、change值改变、focus获得焦点、blur失去焦点 | 表单验证、自动补全、动态更新 |
| 触屏事件 | touchstart触摸开始、touchmove触摸移动、touchend触摸结束 | 移动端滑动、缩放、拖拽 |
事件处理实现方式
原生JavaScript
直接使用DOM API处理事件，无需额外库
function setupEventListeners() {
// 为按钮添加点击事件
const button = document.querySelector('#myButton');
button.addEventListener('click', function(event) {
console.log('按钮被点击了！');
// 执行相关操作
});
// 为输入框添加键盘事件
const input = document.querySelector('#searchInput');
input.addEventListener('keyup', function(event) {
if (event.keyCode === 13) { // Enter键
performSearch();
}
});
}
Vue.js实现
使用Vue的声明式事件绑定，更简洁直观
<!-- Vue模板 -->
<template>
<div>
<button @click="handleClick">点击我</button>
<input v-model="searchText" @keyup.enter="performSearch" placeholder="搜索..." />
<div @mouseover="handleMouseOver" @mouseout="handleMouseOut">
悬停区域
</div>
</div>
</template>
<script>
export default {
data() {
return {
searchText: ''
}
},
methods: {
handleClick() {
console.log('按钮被点击了！');
// 执行相关操作
},
performSearch() {
console.log('执行搜索:', this.searchText);
},
handleMouseOver() {
console.log('鼠标悬停');
},
handleMouseOut() {
console.log('鼠标离开');
}
}
}
</script>