事件周期:捕获=＞目标触发=＞冒泡

原创 已于 2022-03-17 16:55:35 修改 · 333 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#事件周期

于 2019-07-08 09:09:46 首次发布
本文深入解析DOM事件模型的三阶段：捕获、目标触发及冒泡，对比IE8的两阶段模型。阐述事件对象的使用，包括如何获取、取消冒泡及优化事件监听器的策略。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

***事件周期: 
   DOM标准: 3阶段
      1. 捕获(capture): 由外向内依次记录各级元素绑定的相同事件处理函数
      2. 目标触发: 执行实际触发事件的元素上的处理函数
      3. 冒泡: 由目标元素向外，出发各级父元素上绑定的相同事件处理函数
        目标元素(target): 实际触发事件的元素     

   IE8: 2个阶段: 没有捕获阶段   

   事件对象: event: 在事件发生时，自动创建的封装所有事件信息的对象
       event对象提供了操控事件的方法: 阻止事件, 取消冒泡....
   何时: 1. 为了获得事件相关的数据
            2. 操控事件
   如何: 
      获取: DOM标准: 事件对象，默认作为事件处理函数的第一个参数传入: 
               IE8: 事件对象自动保存在全局变量event中
         兼容: function eventHandler(e){
         e=e||window.event;
                  }
      
   取消冒泡: e.stopPropagation();
   利用冒泡: 
   优化: 尽量少的添加EventListener
       为什么: 每个EventListener都是一个对象
          浏览器触发事件时，会轮询每个EventListener对象
          添加的EventListener越多，页面响应速度越低
   解决: 当多个平级子元素绑定相同的事件处理函数时
           其实，只要在父元素绑定一次，所有子元素共用即可！
   难题: 1. 如何获得目标元素:
              this->父元素 X
              DOM: e.target ->目标元素
              IE8: e.srcElement
                  兼容: var target=e.target||e.srcElement;
            2. 鉴别目标元素是否想要: 
              判断元素的名称或属性

理解Javascript——事件的捕获和冒泡
weixin_57959921的博客
03-06 560
理解Javascript——事件的捕获和冒泡
【paper】输入和通信延迟的周期性事件触发鲁棒DMPC
qq_44768318的博客
11-28 941
（正定函数和 K 类函数）：一个函数。
事件周期
weixin_45183986的博客
09-09 562
事件周期 1. 事件捕获 dom对象从最外层开始，逐层向下记录每一个dom对象上有没有绑定该事件，如果有记录下来 执行顺序：从外层向内层 直到目标元素截止 事件目标 事件触发 目标元素的事件触发 事件冒泡 从目标元素开始，逐层向上冒泡触发（捕获阶段记录的绑定的事件） 执行顺序：由内向外 1，当祖先元素和后代元素都绑定的相同的事件时，后代元素的事件触发，祖先的元素的事件也会触发 2，祖...
事件的捕获 目标 冒泡
陈迹·清欢的博客
03-24 232
addEventListener(type,callback,true/false); 事件监听的添加函数具有三个参数，第三个不填默认为false，type指定事件类型，callback是回调函数，true/false为true时代表捕获时触发，false代表冒泡时触发。 就比如一个以下结构的html <div class="div1"> <div class="div2...
BOM（事件周期&event对象&常用HTML DOM对象）
王冉的博客
03-12 478
1、事件周期 解释器在创建一个event对象后，会按照以下过程在html元素间进行传递 -第一阶段：事件捕获，事件对象延DOM树向下传递 -第二阶段：目标触发，调用事件触发函数 -第三阶段：事件冒泡，事件延dom树向上传播 事件冒泡：当处于一个对象模型底部的对象事件发生时，会依次激活祖先对象定义的同类事件处理函数 2、event对象 任何一个事件触发后，都会产生一个event对象，event对象...
周期性触发的自定义触发器
lixia0417mul2的博客
10-04 290
自定义触发器实现
.net页面生存周期详解
山里娃的专栏
02-02 673
导读： 　　当一个页面请求发送到WEB服务器时，不论该事件是由页面提交还是由页面重定向而激发的，页面在其被创建到释放的过程中都会运行一系列的事件。一个ASP.NET页面从悲怆见到释放的过程包含10个事件。 　　（1）对象初始化Init事件：页面初始化的标志是Init事件。页面中的控件（包括页面本身）都是在它们最初的Form中被首次初始化的。在成功创建页面的控件树后，对应用程序激发这个事件。
el-select v-model=“ruleForm.ERPzz” placeholder=“请选择分公司” filterable clearable> <el-option v-for=“item in ERPzzhData” :key=“item.value” :label=“item.label” :value=“item.value”/> </el-select>如何点击这个下拉框触发click事件
03-08
this.$nextTick(() => { const selectEl = this.$refs.mySelect.$el; selectEl.addEventListener('click', this.handleSelectClick); }); }, beforeDestroy() { const selectEl = this.$refs.mySelect.$el; ...
以下代碼點選toolbar某些選項時會跳出選單，當點擊toolbar之外其他區域時，將這些選單收回： <template> <div style="border: 1px solid #ccc" class="editor-container"> <div class="container"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" class="toolbar" /> <Editor style="height: 210px;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" class="editor" /> </div> </div> </template> <script> import '@wangeditor/editor/dist/css/style.css' import { onBeforeUnmount, onMounted, ref, watch } from 'vue' import { Editor, Toolbar } from '@wangeditor/editor-for-vue' // 接收來自父組件的 v-model 值 export default { components: { Editor, Toolbar }, props: { modelValue: String }, emits: ['update:modelValue', 'response'], setup(props, { emit }) { const valueHtml = ref(props.modelValue || '<p>hello</p>') const editorRef = ref(null) onMounted(() => { setTimeout(() => { valueHtml.value = '' }, 1500) }) // 監聽 valueHtml 變化，同步給父組件 // 同時發送 response 事件 watch(valueHtml, (newVal) => { if (newVal !== props.modelValue) { emit('update:modelValue', newVal) emit('response', newVal) } }) // 同步父組件的 modelValue 到 valueHtml watch(() => props.modelValue, (newVal) => { if (newVal !== valueHtml.value) { valueHtml.value = newVal } }) onBeforeUnmount(() => { if (editorRef.value) editorRef.value.destroy() }) const handleCreated = (editor) => { editorRef.value = editor } return { valueHtml, editorRef, toolbarConfig: {}, editorConfig: { placeholder: '請輸入內容...' }, mode: 'default', handleCreated } } } </script> <style scoped> .editor-container { position: fixed; top: 56px; bottom: 45px; left: 0; width: 50%; height: 40%; z-index: 999; background-color: #b60000; overflow-y: auto; } .container { display: flex; flex-direction: column; width: 100%; /* 保持原宽度 */ border: 1px solid #ccc; /* 可选：保留容器边框 */ } .toolbar { } .editor { } </style>
08-03
因此，在全局点击事件中，我们可以检查事件目标（以及它的父元素）是否包含在工具栏元素内，或者是否在菜单元素内。如果都不在，则关闭菜单。 但是，由于菜单是动态生成的，我们无法在组件内部直接获取到菜单的...
<a-config-provider :locale="zhCN" :wave="{ disabled: true }" :theme="{ token: { colorPrimary: appCss.data.colorPrimary } }" :input="{}" > <router-view class="router-view" /> <dericeModel v-if="userData.user.dericeAppShow"></dericeModel> </a-config-provider>这个是vue的全局的配置，另外我想让input的值去掉空格
07-31
然后我们在事件处理函数中，通过事件目标（event.target）来判断是否是内部的input触发的事件。 但是，这样我们仍然需要知道是哪个输入框的值需要trim。 因此，我们修改指令：在绑定的元素上监听blur事件（使用...
我在vue2里面使用antv x6的this.graph.bindKey("backspace",() => {}）来监听键盘事件，我已经引入keyboard和开启键盘事件，为什么监听不到键盘事件触发
08-20
考虑Vue2中键盘事件可能被其他元素捕获或阻止冒泡。 步骤： 1. 确认Graph配置：在创建Graph实例时，需要启用keyboard模块。 2. 绑定事件：确保在Graph实例创建后绑定事件。 3. 注意Vue的键盘事件冲突：Vue可能...
js-捕获、目标、冒泡阶段
flowerxxxxx的博客
02-07 357
捕获阶段 在捕获阶段时从最外层的祖先元素，向目标元素进行时间的捕获，但是默认此时不会触发事件 目标阶段 事件捕获到目标元素，捕获结束开始在目标元素上触发事件 冒泡阶段 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件 ...
dom事件的机制-捕获，目标，冒泡
satisfy
10-08 1027
js事件的机制问题，冒泡（委托），捕获，目标
js事件捕获 目标阶段 事件冒泡
ckxkobe的博客
12-03 1125
js事件捕获 目标阶段 事件冒泡 参考文章 https://segmentfault.com/a/1190000012729080 事件流包含三个阶段 事件捕获 目标阶段 事件冒泡 处于相应阶段内的元素，响应事件就是按照事件的注册顺序来进行相应阶段的触发，比如都是捕获阶段的多个处理函数，就会依照注册顺序执行 stopImmediatePropagation会阻止事件的传播，也会阻止在其执行之后...
浅谈js的事件冒泡和事件捕获
dengxiuye1081的博客
09-28 276
前言： 这篇文章起源于上次工作上的原因，在事件上出的bug,所以就抽空写出一篇，也便于自己以后查阅，如若有幸被您阅读的话，小妹备感荣幸，文章仅为个人理解，如果内容有误的还望海涵，在您时间还方便的时候，希望能告知小妹！谢谢！ 什么是事件？ 　　事件是文档和浏览器窗口中发生的特定的交互瞬间。 事件是javascript应用跳动的心脏，也是把所有东西黏在一起的胶水，...
MySQL事件（Event）
热门推荐
jesseyoung
06-27 3万+
1 触发器简介     数据库服务器从本质上来说是被动的，我们使用一条sql语句显示的要求它，它才会执行一个操作。触发器就是要把一个被动的服务器编程一个主动的服务器。     触发器是存储在目录中的包含了过程式和声明式语句的一段代码，如果在数据库上执行了一个特定的操作，并且只有当某一条件成立的时候，数据库服务器才会激活它，它比数据库本身标准的功能有更精细和更复杂的数据控制能力。     触发
委托事件，事件冒泡，事件捕获，this，target总结
aaa小二
06-02 3000
1，委托事件：依托于事件冒泡原理让自己的父级或祖籍（甚至根元素）来帮自己做某些事情。 优点： A：提高运行效率（尤其对于需要循环操作的列表）； B：动态添加后的元素，仍然可以有这些事件（对比与给自己添加的事件，后续动态添加时，新来的这些元素不会有这些事件） 例子：给列表li添加事件，并保证动态添加的元素都有该事件。 html代码：<ul id="ul"> <li>1</li>
嵌入式C语言从入门到精通视频教程.zip
最新发布
08-21
目录： 1.1C语言会被淘汰吗?.mp4 1.2 如何成为嵌入式高手.mp4 1.3 搭建开发环境.mp4 1.4初识程序结构.mp4 1.5单片机程序的编译与运行简介.mp4 2.1 单片机中数据表现形式.mp4 2.2 为什么要引入数据类型.mp4 2.3 为什么要使用C99的整数类型.mp4 2.4 sizeof用法.mp4 2.5 GPIO输出速度影响什么.mp4 2.5 负数的二进制表现形式.mp4 2.6 变量的用法与注意事项.mp4 2.7 浮点型数据类型 2.8 一个字符引入的BUG 2.9 浮点数应用注意事项 2.10 为什么要引入ASCII码 3.1 C语言有哪些运算符 3.2 算数运算符及应用案例 3.3 算数复合赋值运算符 3.4 增1和减1运算符及应用案例 3.5 单片机是如何控制外设的 3.6 牢记位运算符的口诀 3.7 逻辑移位与算数移位的区别 3.8 左移右移位运算应用案例 3.9 位运算应用案例1.mp4 3.10 位运算应用案例2 .mp4 4.1 printf的基本用法.mp4 4.2 printf的精细格式控制.mp4 4.3 printf输出转义序列.mp4 5.1数据运算的类型转换.mp4 5.2数据截断和数据扩充的规则.mp4 5.3数据扩充的应用案例和总结.mp4 5.4数据运算发生溢出的危害.mp4 5.5 数据扩充案例.mp4 5.6 24000000U中的U是做什么用的?.mp4 6.1 bool数据类型.mp4 ............ 网盘文件永久链接
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值