做网页开发时，经常会遇到点击按钮触发某个操作的需求。比如点一下“删除”按钮，把某条数据删掉。这时候光知道“点了”还不够，还得知道“点了哪个”，这就需要用到事件传参。
什么是事件传参
简单说，事件传参就是在触发事件（比如点击、输入、鼠标移入）的同时，把一些额外的数据一起传进去，方便后续处理。常见的场景像是列表里每个项目都有一个“编辑”按钮，点击时要打开对应项目的编辑页面，那就得把这条项目的 ID 或者其他信息传过去。
怎么实现事件传参
在 JavaScript 中，最常见的方式是通过 HTML 的自定义属性 data- 来绑定数据，然后在事件回调中读取。
<button onclick="handleEdit(event)" data-id="1001" data-name="张三">编辑</button>
<button onclick="handleEdit(event)" data-id="1002" data-name="李四">编辑</button>对应的 JS 函数可以这样写：
function handleEdit(event) {
const btn = event.target;
const id = btn.getAttribute('data-id');
const name = btn.getAttribute('data-name');
console.log(`编辑用户：${name}，ID 为 ${id}`);
}这种方式干净利落，不用额外维护全局变量，也不用靠位置或顺序推断数据，适合大多数前端场景。
箭头函数中的传参也很常见
有时候你可能看到这样的写法：
<button onclick="handleDelete(123)">删除</button>对应的函数：
function handleDelete(id) {
console.log(`准备删除 ID 为 ${id} 的数据`);
// 发起请求或弹确认框
}这种直接在 onclick 里调用带参数的函数，其实也算事件传参的一种简化形式。虽然不够灵活（比如不能访问原生 event 对象），但在简单场景下很实用。
Vue 或 React 中的写法更直观
在现代框架里，事件传参更自然。比如 Vue 中可以这样写：
<button @click="handleClick(item.id)" v-for="item in list">操作 {{ item.name }}</button>React 也类似：
{list.map(item =>
<button onClick={() => handleClick(item.id)} key={item.id}>
操作 {item.name}
</button>
)}这些写法本质上都是在事件触发时，把当前上下文的数据作为参数传递给处理函数，逻辑清晰，维护起来也方便。
实际开发中，别再只监听“点了”这件事，而是要想想：点的是谁？背后的数据是什么？把参数传好，代码才能真正解决问题。