DOM事件捕获、冒泡和事件委托,不冒泡的事件有哪些
时间: 2024-05-27 09:11:59 浏览: 13
1. DOM事件捕获:事件从最外层的祖先元素开始向下传递,直到目标元素。
2. DOM事件冒泡:事件从目标元素开始向上传递,直到最外层的祖先元素。
3. 事件委托:将事件绑定在父元素上,利用事件冒泡的机制,在父元素上统一处理子元素的事件。
4. 不冒泡的事件有:focus、blur、load、unload、resize、submit、reset、change。
相关问题
js dom事件冒泡和事件捕获的执行过程
事件冒泡和事件捕获都是指在处理事件时的执行顺序,以及事件在DOM树中的传播方式。
事件冒泡指的是当一个元素触发了某个事件(比如点击事件),该事件会从最内层的元素开始向外层元素逐层传播,直到传播到最外层的元素为止。比如,当一个按钮被点击时,点击事件会先被按钮本身处理,然后再传播到按钮的父元素、祖先元素,直到传播到document对象为止。
事件捕获则是相反的过程,事件从最外层的元素开始传播,逐层向内层传播,直到传播到触发事件的元素为止。比如,当一个按钮被点击时,点击事件会先被document对象处理,然后再传播到按钮的祖先元素、父元素,最后传播到按钮本身。
在实际应用中,浏览器默认采用事件冒泡的处理方式。但是可以通过在事件处理函数中使用`event.stopPropagation()`方法来阻止事件的冒泡传播,或者使用`event.stopImmediatePropagation()`方法来阻止事件的冒泡传播和其他事件处理函数的执行。同时,也可以通过在事件处理函数中使用`event.preventDefault()`方法来阻止事件的默认行为,比如禁止链接跳转或者表单提交等行为。
事件冒泡和事件捕获用处
事件冒泡和事件捕获是指浏览器中处理DOM元素上事件的两种不同方式。它们都是JavaScript事件模型的一部分,用于处理事件。事件冒泡是指事件从最深层的元素逐级向上传播到最外层的元素,而事件捕获则是从最外层的元素逐级向下捕获到最深层的元素。这两种方式都可以用来控制事件的传播和处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [深入理解JavaScript的事件冒泡与事件捕获](https://blog.csdn.net/weixin_43715214/article/details/129415062)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)