在做网页时，经常需要让用户点击按钮后弹出提示，或者输入内容时实时显示结果。这些互动效果都离不开事件绑定。用ref="/tag/137/" style="color:#C468A7;font-weight:bold;">JavaScript代码绑定事件，其实没那么复杂，掌握几种常用方式就能应付大部分场景。
直接在元素上绑定 onclick
最简单的做法就是在 HTML 元素上直接写 onclick。比如有个按钮，想点它的时候弹个提示：
<button onclick="alert('你点我了！')">点我试试</button>这种方式写起来快，适合小功能调试。但代码混在 HTML 里，改起来麻烦，不推荐用在大项目中。
通过 DOM 获取元素再绑定
更常见的做法是先用 JavaScript 找到元素，再给它加事件。比如页面有个 id 为 submit 的按钮：
<button id="submit">提交</button>
<script>
const btn = document.getElementById('submit');
btn.onclick = function() {
alert('表单已提交');
};
</script>这样 HTML 和 JS 分开了，结构更清晰。但注意，onclick 只能绑定一个函数，如果后面再写一次 onclick，之前的就会被覆盖。
使用 addEventListener 添加多个监听
想要给同一个元素绑多个行为，就得用 addEventListener。比如不仅要点按钮弹提示，还想记录点击次数：
<script>
const btn = document.getElementById('submit');
btn.addEventListener('click', function() {
alert('操作成功');
});
btn.addEventListener('click', function() {
console.log('第1次点击');
});
</script>这两个函数都会执行。addEventListener 还支持更多事件类型，像 focus、blur、keydown 都能用。
动态生成的元素怎么绑事件？
有时候按钮是 JavaScript 动态加进去的，比如用户每输入一行就生成一个删除按钮。这时候如果在页面加载时去绑事件，会找不到元素。
解决办法是用事件委托。把事件绑在父容器上，利用事件冒泡机制来判断具体点了哪个子元素：
<ul id="list">
<li><span class="del">删除</span></li>
</ul>
<script>
document.getElementById('list').addEventListener('click', function(e) {
if (e.target.classList.contains('del')) {
e.target.parentElement.remove();
}
});
</script>这样哪怕后来新增的 li，也能正常响应删除操作。
别忘了移除事件
有些场景下，事件只需要触发一次，比如引导动画。可以用 removeEventListener 清理，避免重复执行或内存浪费：
function welcome() {
alert('欢迎访问');
this.removeEventListener('click', welcome);
}
btn.addEventListener('click', welcome);这样用户只能看到一次欢迎提示。
绑定事件是网页交互的基础。选对方法能让代码更稳，维护更容易。日常开发中，addEventListener 搭配事件委托基本能解决所有问题。