阻止事件冒泡\事件捕获 [无废话版]

已于 2023-02-06 18:03:51 修改
阅读量2k 收藏 1
点赞数 1
文章标签： javascript 前端 html
于 2022-01-31 17:28:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46235143/article/details/122760197
版权

(一) 前言

1.1 Dom 事件流

  • 捕获阶段
  • 处于目标阶段
  • 冒泡阶段

DOM事件流中，实际的目标在捕获阶段不会接收到事件，下一个阶段是处于目标阶段，这时事件被触发，最后进入事件冒泡阶段。我们认为处于目标阶段是事件冒泡阶段的一部分。

1.2 监听事件如何切换冒泡与捕获

改变 addEventListener 的第三个参数:接收布偶值,默认为 false

  • true 为采用事件捕获
document.getElementById("third").addEventListener("click",function(
最低0.47元/天 解锁文章
庚辰腊七木头鱼
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
事件流：阻止事件冒泡、阻止事件捕获preventDefault()、stopPropagation()、return false 之间的区别
weixin_41796631的博客
05-05 6247
参考文章：https://www.jb51.net/article/94394.htm W3C 中定义事件的发生经历三个阶段： 捕获阶段（capturing）、目标阶段（targetin）、冒泡阶段（bubbling） 冒泡型事件：当你使用事件冒泡时，子级元素先触发，父级元素后触发 捕获型事件：当你使用事件捕获时，父级元素先触发，子级元素后触发 DOM事件流：同时支持两种事件模型：捕获型...
事件冒泡、捕获？如何阻止
qq_38888512的博客
04-02 3464
事件冒泡 <style> div{ color: white; font-size: 30px; } .content{ width: 400px; height: 400px; background-color...
js中冒泡和捕获/阻止冒泡和捕获事件
sk_yi的博客
07-13 5633
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡 　　事件流描述的是从页面中接收事件的顺序。提出事件流概念的正是IE和Netscape，但是前者提出的是我们常用的事件冒泡流，而后者提出的是事件捕获流。 第一部分：事件冒泡 　　即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。 　　下面举一个简单的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt
js中的事件冒泡与事件捕获
~~~
03-24 2729
js中的事件冒泡与事件捕获。当点击黑色容器时，开始进行事件捕获，Js事件流从window上往事件触发处传播，遇到注册的捕获事件就会触发；但是捕获阶段默认是不处理的（addEventListener第三个参数默认是false）,紧接着传播到事件触发处，触发注册的事件，打印div3，然后进行冒泡阶段从事件触发处 往window上传播，遇到注册的冒泡事件会触发，打印div2，再打印div1。就是因为点击了盒子的子元素（黄色和红色部分），事件冒泡到了绑定拖拽事件的父元素身上（蓝色部分），导致触发的是拖拽效果。
Vue基础3之事件处理
qq_34306228的博客
11-08 3568
事件的基本使用：Vue中的事件修饰符： a标签的页面不会跳转 showTip事件不会触发 不使用self时候，点击按钮，会发生冒泡，打印两次，但是event.target还是button事件，所以两次输出的当前操作的元素都是button事件 使用self时候，点击按钮，但是由于外层的div当前操作元素是button不是div，所以外层即便冒泡也不会打印输出 鼠标滚轮滚动，即便滚动到最底部，也能依旧触发该事件，但是如果是页面滚动条事件的话，到底部之后就再不会触发该事件了。 正常运行
vue 阻止事件冒泡和捕获
学习 记录 总结 分享
05-10 4883
阻止事件冒泡: 阻止事件默认行为: 事件只作用在元素本身，而不是其子元素要想了解 VUE 阻止事件冒泡和捕获方法，首先要了解一下 JS 事件和 JS 阻止事件冒泡，捕获方法。
JS中事件冒泡和事件捕获介绍
11-27
1、冒泡事件： 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是，就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div...
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
JavaScript中的事件处理机制是网页交互的核心，其中包括了两种主要的事件传播模式：事件冒泡（Bubbling）和事件捕获（Cropping）。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到最外层的节点。而事件捕获则...
js之事件冒泡和事件捕获详细介绍
01-19
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。  IE 5.5: div -> body -> document  IE 6.0: div -> body -> html -> document  Mozilla 1.0: div -> body -> ...
JavaScript事件冒泡与事件捕获实例分析
01-19
本文实例讲述了JavaScript事件冒泡与事件捕获。分享给大家供大家参考，具体如下： 1、事件冒泡 在一个对象上触发某类事件，如onclick事件等，在其祖先节点上也会依次触发该事件。 <body onclick=alert('body...
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡
qinzheng_chen的博客
04-19 687
事件冒泡 即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。 　下面举一个简单的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bubble</title> <style> button{ background: red;
JS基础-18-addEventListener和冒泡
HZ~的博客
08-03 1200
绑定事件的两种方式/DOM事件的级别 方式一：onclick element.onclick = function () { } 举例： <body> <button>点我</button> <script> var btn = document.getElementsByTagName("button")[0]; //这种事件绑定的方法容易被层叠。 btn.onclick = function () {
常用事件 与事件监听addEventListener 阻止事件冒泡、默认行为
qq_45305088的博客
11-03 5482
获取鼠标位置 function（event）{ console.log(event.clientX);输出鼠标的X轴 console.log(event.ClientY);输出鼠标的y轴 } 获取键盘 document.onkeydowm=function(e){ console.log(e.keycode);输出键盘的字符代码 } 触屏事件 box.ontouchstart=function（）{}触碰 box.ontouchend=function（）{}触碰离开 box.ontouchmo
一文彻底搞懂事件机制:冒泡、捕获、传播、委托 以及如何阻止冒泡与捕获
m0_54944506的博客
08-25 741
遇到的需求是项目预览，我们项目预览采用的是实际项目的代码，能够极大的减少开发量，但是在预览时有些操作是不需要的，就需要将某些click事件去掉，但是这些事件是写在实际项目中，是不能进行修改的，所以就想到了通过阻止事件捕获来取消click事件。：当需要给多个平级dom添加相同事件，可以通过事件委托到父节点，通过给父节点添加事件来避免多次添加事件，随着前端框架的普及以及jquery的没落，用的也就比较少了。：当dom触发了事件后，会先通过事件传播捕获到事件源，然后事件源通过事件传播实现事件冒泡。
前端学习--JS入门(6) 事件冒泡/事件委托/获取元素位置
Michelle209的博客
04-07 1070
当一个元素的事件被触发时，同样的事件会在该元素的所有祖先元素中依次被触发（从里到外）元素距离自己定位父级元素的左、上距离（如果没有定位，就一直往上找到有定位的父元素）给父元素注册事件，当触发子元素时，会冒泡到父元素上，触发父元素的事件。默认有冒泡模式存在，事件容易影响到父级元素。同时给多个元素注册事件--利用事件冒泡。事件流是事件完整执行过程中的流动路径。从DOM的根元素执行事件（从外到里）滚动条再滚动的时候持续触发的事件。外部资源加载完毕时触发的事件。应用：固定导航栏/返回顶部。只会触发所有父元素的。
冒泡事件和捕获事件以及阻止冒泡和捕获方法的详解
qq_37822353的博客
09-12 4651
(1)相关概念 事件流的概念：事件流所描述的就是从页面中接受事件的顺序。 事件流也有两种，分别是事件冒泡和事件捕获，现行的主流是事件冒泡。 以上就是通过原生js将每一个div都绑定了一个事件，且通过useCapture这个参数将事件类型设置为true(捕获）或者 false(默认为false,冒泡） 需要注意的是：更改事件流的属性，只能通过原生js中的方法，因为只有原生js中有更改事件流属性的参数
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 457
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
vue3 ts 回车事件
06-09
在 Vue3 + TypeScript 中，可以通过在模板中使用`@keydown.enter`和对应的方法来实现回车事件的绑定。具体实现方式如下： 1. 在模板中添加输入框和绑定方法。 ```html <template> <div> <input type="text" v-model="inputValue" @keydown.enter="handleEnter" /> </div> </template> ``` 2. 在组件中定义输入框的值和绑定方法。 ```typescript <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const inputValue = ref(''); const handleEnter = () => { // 处理回车事件 console.log('Enter key was pressed'); }; return { inputValue, handleEnter, }; }, }); </script> ``` 在这个示例中，当用户在输入框中按下回车键时，`handleEnter`方法会被调用，从而触发回车事件。你可以根据实际需求来编写`handleEnter`方法中的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值