9. 三种事件绑定方式

事件绑定就是告诉浏览器：用户点这个元素时执行这段代码。

核心三种：
① onclick = function(){}——DOM0 写法，后写覆盖先写
② addEventListener("click", fn)——DOM2 写法，可绑多个
③ attachEvent——老 IE 写法（不用管）

坑：onclick 只能绑一个、addEventListener 第三个参数控制捕获/冒泡、移除用 removeEventListener。

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');

// 先躺 A
btn.onclick = function () { console.log('A'); };

// 又躺 B，把 A 挤掉！点一下只出 B
btn.onclick = function () { console.log('B'); };

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

③ addEventListener（正规插座，首选）

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

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

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

// 插插座：追加 A，不顶掉
btn.addEventListener('click', one);

// 再插 B，两个点都跑！
btn.addEventListener('click', two);

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

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

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

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

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

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

本页重点