← 返回目录

9. 三种事件绑定方式

给按钮"装开关"有三种手法：行内 onclick（把电线直接焊在按钮上，乱糟糟）；btn.onclick = 函数（只能装一个开关，后装的会把前面的顶掉）；addEventListener（正规插座，能插好几个、能精准拔下、还能选什么时候触发）——做项目一律用它。

9.1 互动演示（三种开关，亲手点）

9.2 知识点逐条讲解

① 行内 onclick（电线焊在按钮上）

直接在按钮标签里写 onclick="函数名()"。就像把电线焊死在按钮上，HTML 和 JS 缠在一起。

<button onclick="sayInline()">点我</button> <!-- 电线直接焊在按钮上 -->
<script>
  function sayInline() { alert('触发'); } // 点按钮就弹这句
</script>
	

如果你写了 onclick="fn()" 却报 fn is not defined。因为按钮上写的 fn 必须是个全局函数才找得到；现代工程化里函数不暴露到全局就会这样。而且 HTML 和 JS 混一起难维护——只适合临时小演示。

② btn.onclick = 函数（后装顶掉前装）

它像个单人床：躺第二个人，第一个人就被挤下去了。

let btn = document.getElementById('overBtn'); // 抓到按钮
btn.onclick = function () { console.log('A'); }; // 先躺 A
btn.onclick = function () { console.log('B'); }; // 又躺 B，把 A 挤掉！点一下只出 B
	

如果你给 btn.onclick 写了两次，发现前面那段不跑了。因为它是"赋值"不是"追加"，只认最后一次；想解绑就 btn.onclick = null。

③ addEventListener（正规插座，首选）

let btn = document.getElementById('multiBtn'); // 抓到按钮

function one() { console.log('A'); } // 取名的函数 A
function two() { console.log('B'); } // 取名的函数 B

btn.addEventListener('click', one);  // 插插座：追加 A，不顶掉
btn.addEventListener('click', two);  // 再插 B，两个点都跑！

btn.removeEventListener('click', one); // 精准把 A 拔下来，B 还在
	

如果你用匿名函数 addEventListener，之后想 remove 却拔不掉。因为拔函数要靠"同一个引用"，匿名函数长得一样也不是同一个；想能拔，绑的时候就得用具名函数。

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：所有按钮点击、表单交互；需要解绑的动态组件。

② 常见坑：onclick 写两次只跑最后一次；匿名函数 remove 不掉。

③ 怎么解决：统一用 addEventListener，绑多个都触发；要解绑就用具名函数。