一、冒泡的事件
这类事件最为常见，涵盖了大多数DOM操作相关的事件：
1. 鼠标事件
- `click`
- `dblclick`
- `mousedown`
- `mouseup`
- `mouseover`
- `mouseout`
- `mousemove`
- `contextmenu`
2. 键盘事件
- `keydown`
- `keyup`
- `keypress`
3. 表单事件
- `submit`
- `change`
- `focusin`
- `focusout`
- `input`
- `reset`
4. 其他事件
- `scroll`（仅在某些浏览器中冒泡）
- `touchstart`
- `touchmove`
- `touchend`
二、不冒泡的事件
这类事件相对较少，一般是与特定状态相关的事件：
1. 焦点事件
- `focus`
- `blur`
- `DOMFocusIn`（非标准，替代方案为`focusin`）
- `DOMFocusOut`（非标准，替代方案为`focusout`）
2. 媒体事件
- `load`
- `error`
- `abort`
- `play`
- `pause`
- `ended`
- `timeupdate`
3. 其他事件
- `resize`
- `load`（图片、窗口等）
- `unload`
- `beforeunload`
- `selectstart`（文本选择开始）
三、注意事项
1. **替代方案**
对于不冒泡的事件，若你需要实现类似冒泡的效果，可以借助以下方式：
- 使用捕获阶段（通过`addEventListener`的第三个参数设为`true`来实现）
- 利用`focusin/focusout`替代`focus/blur`
- 运用事件委托机制
2. **特殊事件**
- `scroll`事件：在大多数现代浏览器中，若给`document`或`window`添加`scroll`事件，它是会冒泡的。但要是给某个元素单独添加`scroll`事件，其冒泡行为在不同浏览器中可能存在差异。
- `change`事件：表单元素的`change`事件会冒泡，不过在某些旧版本浏览器中可能会有兼容性问题。
3. **自定义事件**
自定义事件默认是不冒泡的，不过在创建自定义事件时，可以通过设置`bubbles: true`让它冒泡。示例如下：
javascript
const event = new Event('customEvent', { bubbles: true });
document.getElementById('element').dispatchEvent(event);
四、如何验证
你可以通过下面的代码来验证某个事件是否冒泡：
html
<div id="parent" style="padding: 20px; background: lightblue;">
<button id="child">点击测试</button>
</div>
<script>
document.getElementById('child').addEventListener('click', function(e) {
console.log('子元素被点击');
});
document.getElementById('parent').addEventListener('click', function(e) {
console.log('父元素接收到点击事件');
});
</script>
如果点击按钮后，父元素的事件处理函数被触发，就表明该事件会冒泡。