# 事件处理
PE引擎提供了简洁而强大的事件处理机制，让你能够轻松响应用户的交互操作。事件处理是创建交互式应用的关键部分。
## 事件绑定语法
在PE的场景模板中，你可以使用`@`前缀直接绑定事件处理器：
```html
点击我
悬停我
按钮1
按钮2
```
## 支持的事件类型
PE支持所有标准的DOM事件类型：
### 鼠标事件
```html
鼠标事件示例
```
### 键盘事件
```html
按键事件示例（点击后按键盘）
```
### 表单事件
```html
```
### 触摸事件
```html
触摸事件示例
```
## 事件对象
所有事件处理器都会接收到一个事件对象，包含有关事件的详细信息：
```javascript
function handleClick(event) {
// 事件基本信息
console.log('事件类型:', event.type)
console.log('目标元素:', event.target)
console.log('当前元素:', event.currentTarget)
// 鼠标位置
console.log('页面坐标:', event.pageX, event.pageY)
console.log('客户端坐标:', event.clientX, event.clientY)
// 键盘信息
console.log('是否按下Ctrl键:', event.ctrlKey)
console.log('是否按下Alt键:', event.altKey)
console.log('是否按下Shift键:', event.shiftKey)
// 阻止默认行为
event.preventDefault()
// 阻止事件冒泡
event.stopPropagation()
}
```
## 在JavaScript中绑定事件
除了在模板中绑定事件，你也可以在JavaScript代码中直接绑定事件：
```javascript
// 获取场景元素
const element = game.getSceneElement('my-button')
// 添加事件监听器
element.element.addEventListener('click', function(event) {
console.log('元素被点击了')
})
// 添加多个事件监听器
element.element.addEventListener('mouseenter', handleMouseEnter)
element.element.addEventListener('mouseleave', handleMouseLeave)
// 移除事件监听器
element.element.removeEventListener('click', handleClick)
```
## 事件修饰符
PE支持一些常用的事件修饰符，类似于Vue.js的语法：
```html
阻止默认行为
阻止事件冒泡
只触发一次
阻止冒泡和默认行为
```
## 自定义事件
你也可以创建和触发自定义事件：
```javascript
// 创建自定义事件
const customEvent = new CustomEvent('myCustomEvent', {
detail: { message: '这是自定义事件数据' }
})
// 触发自定义事件
element.element.dispatchEvent(customEvent)
// 监听自定义事件
element.element.addEventListener('myCustomEvent', function(event) {
console.log('接收到自定义事件:', event.detail.message)
})
```
## 事件总线
PE引擎内置了事件总线，允许你在不同组件间进行通信：
```javascript
// 发送事件
game.eventBus.emit('user-login', { username: 'john' })
// 监听事件
game.eventBus.on('user-login', function(data) {
console.log('用户登录:', data.username)
})
// 移除事件监听器
game.eventBus.off('user-login', handlerFunction)
```
## 在场景脚本中处理事件
在场景的`
```
## 事件处理最佳实践
### 1. 合理使用事件委托
对于大量相似元素，使用事件委托可以提高性能：
```html
项目1
项目2
项目3
```
### 2. 及时移除事件监听器
在适当的时机移除事件监听器，避免内存泄漏：
```javascript
onLoad(() => {
// 添加事件监听器
document.addEventListener('keydown', handleGlobalKeyDown)
})
onDestory(() => {
// 移除事件监听器
document.removeEventListener('keydown', handleGlobalKeyDown)
})
function handleGlobalKeyDown(event) {
// 全局键盘事件处理
if (event.key === 'Escape') {
PE.navigateTo('/')
}
}
```
### 3. 使用防抖和节流
对于频繁触发的事件（如滚动、输入），使用防抖和节流优化性能：
```javascript
// 防抖函数
function debounce(func, wait) {
let timeout
return function(...args) {
clearTimeout(timeout)
timeout = setTimeout(() => func.apply(this, args), wait)
}
}
// 节流函数
function throttle(func, limit) {
let inThrottle
return function(...args) {
if (!inThrottle) {
func.apply(this, args)
inThrottle = true
setTimeout(() => inThrottle = false, limit)
}
}
}
// 使用防抖处理输入事件
const handleInput = debounce(function(event) {
console.log('输入内容:', event.target.value)
}, 300)
// 使用节流处理滚动事件
const handleScroll = throttle(function(event) {
console.log('页面滚动')
}, 100)
```
## 完整示例
以下是一个完整的事件处理示例：
### scenes/game/index.pe
```html
开始游戏
暂停
重置
得分: {{ score }}
生命: {{ lives }}
```
通过以上内容，你已经了解了PE引擎的事件处理机制。在下一章节中，我们将探讨生命周期的相关内容。