DOM事件

DOM事件：DOM 事件是指浏览器中用户与页面交互或浏览器自身行为发生时触发的信号，你可以通过 JavaScript 监听这些信号并执行相应的代码。

通俗理解

把 DOM 事件想象成"通知"：

基本用法（三种绑定方式）

1. HTML 属性方式（不推荐）

html

<button οnclick="alert('点击了')">点我</button>

2. DOM 属性方式

javascript

const btn = document.getElementById('myBtn'); btn.onclick = function() { alert('点击了'); };

3. 标准方式：addEventListener（推荐）

javascript

const btn = document.getElementById('myBtn'); btn.addEventListener('click', function() { alert('点击了'); });

🔄 事件流（捕获 → 目标 → 冒泡）

当你点击一个嵌套的元素时，事件会经历三个阶段：

text

1. 捕获阶段（从外到内） document → html → body → div → button 2. 目标阶段（到达目标） button（被点击的元素） 3. 冒泡阶段（从内到外） button → div → body → html → document

html

<div id="parent"> <button id="child">点我</button> </div>

javascript

// 默认是冒泡阶段（第三个参数 false 或不写） document.getElementById('parent').addEventListener('click', function() { console.log('父元素被点击了'); }, false); // false = 冒泡阶段 // 捕获阶段（第三个参数 true） document.getElementById('parent').addEventListener('click', function() { console.log('父元素捕获到了'); }, true); // true = 捕获阶段

🚫 阻止事件行为

javascript

document.getElementById('link').addEventListener('click', function(event) { event.preventDefault(); // 阻止跳转 event.stopPropagation(); // 阻止冒泡 console.log('点击了链接，但没有跳转'); });

🧩 常见 DOM 事件分类