使用JavaScript操作DOM节点事件的具体方案
作者：好大哥呀
文章介绍了HTML中事件绑定的三种方式（行内绑定、DOM属性绑定、addEventListener）,推荐使用addEventListener,因为它支持多函数绑定和事件传播控制,文章还讲解了事件解绑和事件对象的使用,并通过示例展示了如何在实际开发中应用这些知识,需要的朋友可以参考下
一、核心：事件绑定的 3 种方式（推荐第 3 种）
事件绑定是操作 DOM 事件的基础，核心是「给 DOM 节点关联一个触发后执行的函数」，以下是从易到难、从旧到新的 3 种方式：
1. 行内绑定（最原始，不推荐）
直接在 HTML 标签里写on+事件名，把 JS 代码写在标签里，耦合性高，不利于维护。
<!-- 行内绑定点击事件 -->
<button onclick="alert('点击了按钮')">按钮1</button>
<!-- 也可以调用外部函数 -->
<button onclick="handleClick()">按钮2</button>
<script>
function handleClick() {
console.log('按钮2被点击');
}
</script>
2. DOM 属性绑定（简单，但有缺陷）
通过 JS 给 DOM 节点的on+事件名属性赋值，缺点是一个事件只能绑定一个处理函数（后绑定的会覆盖前一个）。
<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= 捕获阶段触发），或配置对象。
<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即可：
const btn3 = document.getElementById('btn3');
btn3.onclick = null; // 解绑点击事件
2. 解绑 addEventListener 绑定的事件
注意：必须使用「绑定时候的同一个函数引用」（匿名函数无法解绑）！
<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）」，里面包含触发事件的所有信息（比如点击位置、触发元素、是否按了快捷键等），是开发的核心工具。
<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. 点击按钮切换元素样式
<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. 输入框实时监听输入内容
<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绑定的事件必须用具名函数才能解绑，避免内存泄漏。
以上就是使用JavaScript操作DOM节点事件的具体方案的详细内容，更多关于JavaScript操作DOM节点事件的资料请关注脚本之家其它相关文章！