第12课：事件绑定
进度 0/30
👆
事件绑定
页面开始回应你的手指
📖知识引入
📣事件=用户动作
点击、输入、手指滑动，这些动作都会发出「事件」，像按门铃：铃一响，屋里的代码就出来开门。
🔔bindtap点击绑定
WXML里写bindtap="tapMe"，JS里写tapMe()函数。点击即触发——注意两个名字必须一字不差！
⌨️bindinput输入监听
input每敲一个字触发一次bindinput，通过e.detail.value能拿到用户当前输入的内容。
📦事件对象e
每次事件都自带一个包裹e：currentTarget是「谁被点了」，detail里有点击坐标、输入值等线索。
🛑catch阻止冒泡
bindtap会「冒泡」：子标签点击会传给父标签。catchtap能拦住它，防止里外同时响应。
💡
WXML里的bindtap和JS里的函数名必须一字不差！
🔍按钮被点的一生
<!-- WXML -->
<button bindtap="onLike" data-id="1">👍 点赞</button>
// JS
Page({
onLike(e) {
// data-开头的数据会搭便车一起传过来
console.log('按钮id:', e.currentTarget.dataset.id)
console.log('点击详情:', e.detail)
}
})一次点击的旅行：
手指点击按钮 │ ▼ 按钮发出tap事件 🔔 │ ▼ WXML：bindtap接到通知 │ ▼ JS：onLike函数执行 │ ▼ console.log打印证据
新手高频翻车现场： WXML写 bindtap="onLike" JS却写成 onlike() ❌ 大小写不同=找不到人！
小贴士： data-id="1"是自定义数据， 能搭在事件上一起传过去， 列表里区分「点的是哪一条」 全靠它！
🎯小测验
第1题：给按钮绑定点击事件，WXML里应该写？
第2题：点击没反应，最该检查的是？
第3题：在事件函数里拿到用户输入的值，用？
📝本课知识点
- ✓事件是用户动作发出的信号
- ✓bindtap绑定点击、bindinput监听输入
- ✓事件对象e自带线索
- ✓data-*自定义数据搭便车传递
- ✓catchtap阻止事件冒泡
第12课完成！继续探索下一课吧 🚀