网页中的事件,默认情况下,哪些冒泡,哪些不冒泡

发布时间:2025-05-13      访问量:44
在网页开发里,事件是否冒泡取决于事件类型。下面为你介绍常见事件的冒泡情况:

一、冒泡的事件
这类事件最为常见,涵盖了大多数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>
如果点击按钮后,父元素的事件处理函数被触发,就表明该事件会冒泡。
堆内存
多线程
strdup
初始化器
冒泡排序
增删改查
BufferedReader
输入输出
面向对象
生命周期
闭包的概念
原型链
Flask
mysql-connector-python
单例模式
浅拷贝
隔离级别
索引
InnoDB
左连接
聚合函数
PuTTY
TRUNCATE
str_starts_with_many
DateTime
array_combine
闭包的概念