一、冒泡的事件
这类事件最为常见,涵盖了大多数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>
如果点击按钮后,父元素的事件处理函数被触发,就表明该事件会冒泡。