一、核心：事件绑定的 3 种方式（推荐第 3 种）
事件绑定是操作 DOM 事件的基础，核心是「给 DOM 节点关联一个触发后执行的函数」，以下是从易到难、从旧到新的 3 种方式：
1. 行内绑定（最原始，不推荐）
直接在 HTML 标签里写on+事件名，把 JS 代码写在标签里，耦合性高，不利于维护。
html
预览
<!-- 行内绑定点击事件 --> <button onclick="alert('点击了按钮')">按钮1</button> <!-- 也可以调用外部函数 --> <button onclick="handleClick()">按钮2</button> <script> function handleClick() { console.log('按钮2被点击'); } </script>2. DOM 属性绑定（简单，但有缺陷）
通过 JS 给 DOM 节点的on+事件名属性赋值，缺点是一个事件只能绑定一个处理函数（后绑定的会覆盖前一个）。
html
预览
<button id="btn3">按钮3</button> <script> const btn3 = document.getElementById('btn3'); // 绑定点击事件 btn3.onclick = function() { console.log('第一次绑定的点击事件'); }; // 后绑定的会覆盖前一个 btn3.onclick = function() { console.log('第二次绑定的点击事件（覆盖了之前的）'); }; </script>3. addEventListener（推荐，标准方式）
这是 W3C 标准的事件绑定方式，支持一个事件绑定多个处理函数，还能控制事件传播方式，是开发中最常用的。语法：dom节点.addEventListener(事件名, 处理函数, 可选参数);
- 事件名：不带
on（比如click而非onclick）； - 处理函数：触发事件后执行的函数；
- 可选参数：布尔值（
false= 冒泡阶段触发，默认；true= 捕获阶段触发），或配置对象。
html
预览
<button id="btn4">按钮4</button> <script> const btn4 = document.getElementById('btn4'); // 绑定第一个点击事件 btn4.addEventListener('click', function() { console.log('点击事件1'); }); // 绑定第二个点击事件（不会覆盖，会依次执行） btn4.addEventListener('click', function() { console.log('点击事件2'); }); // 也可以绑定其他事件（如鼠标移入、移出） btn4.addEventListener('mouseenter', function() { btn4.style.backgroundColor = 'pink'; }); btn4.addEventListener('mouseleave', function() { btn4.style.backgroundColor = ''; }); </script>二、事件解绑：移除已绑定的事件
绑定的事件如果不再需要，要及时解绑，避免内存泄漏，不同绑定方式的解绑方法不同：
1. 解绑 DOM 属性绑定的事件
直接把on+事件名赋值为null即可：
javascript
运行
const btn3 = document.getElementById('btn3'); btn3.onclick = null; // 解绑点击事件2. 解绑 addEventListener 绑定的事件
⚠️ 注意：必须使用「绑定时候的同一个函数引用」（匿名函数无法解绑）！
html
预览
<button id="btn5">按钮5</button> <script> const btn5 = document.getElementById('btn5'); // 先定义具名函数（不能用匿名函数） function handleBtn5Click() { console.log('按钮5被点击'); } // 绑定事件 btn5.addEventListener('click', handleBtn5Click); // 解绑事件（用同一个函数） btn5.removeEventListener('click', handleBtn5Click); </script>三、事件对象：获取事件的详细信息
事件处理函数会自动接收一个「事件对象（通常命名为e/evt）」，里面包含触发事件的所有信息（比如点击位置、触发元素、是否按了快捷键等），是开发的核心工具。
html
预览
<button id="btn6">按钮6</button> <div id="box" style="width: 200px; height: 200px; background: #eee;"></div> <script> // 1. 点击按钮：获取事件信息 const btn6 = document.getElementById('btn6'); btn6.addEventListener('click', function(e) { console.log('触发事件的元素：', e.target); // 触发事件的DOM节点（按钮本身） console.log('点击的坐标（相对于页面）：', e.pageX, e.pageY); console.log('是否按了Ctrl键：', e.ctrlKey); }); // 2. 常用：阻止默认行为（比如阻止a标签跳转、表单提交） const a = document.createElement('a'); a.href = 'https://baidu.com'; a.textContent = '百度链接（点了不跳转）'; document.body.appendChild(a); a.addEventListener('click', function(e) { e.preventDefault(); // 阻止默认行为（跳转） console.log('点击了链接，但没跳转'); }); // 3. 常用：阻止事件冒泡（避免父元素触发相同事件） const box = document.getElementById('box'); box.addEventListener('click', function() { console.log('点击了div'); }); btn6.addEventListener('click', function(e) { e.stopPropagation(); // 阻止事件冒泡到div console.log('点击了按钮，不会触发div的点击事件'); }); </script>四、常用场景示例
1. 点击按钮切换元素样式
html
预览
<p id="text">Hello DOM</p> <button id="toggleBtn">切换样式</button> <script> const text = document.getElementById('text'); const toggleBtn = document.getElementById('toggleBtn'); toggleBtn.addEventListener('click', function() { text.classList.toggle('active'); // 切换active类 }); </script> <style> .active { color: red; font-size: 20px; font-weight: bold; } </style>2. 输入框实时监听输入内容
html
预览
<input type="text" id="input" placeholder="输入内容..."> <p id="preview"></p> <script> const input = document.getElementById('input'); const preview = document.getElementById('preview'); // 监听输入事件（input） input.addEventListener('input', function(e) { preview.textContent = `你输入了：${e.target.value}`; }); </script>总结
- 事件绑定优先用
addEventListener：支持多函数绑定，功能更全； - 事件对象是核心：通过
e.target找触发元素、e.preventDefault()阻止默认行为、e.stopPropagation()阻止冒泡； - 解绑事件要注意：
addEventListener绑定的事件必须用具名函数才能解绑，避免内存泄漏。
