事件捕获阶段：从最外层到内层处于目标阶段：前元素的相关事件行为触发事件冒泡阶段：从内层到外层注：ddEventListener：addEventListener是DOM2级事件新增的指定事件处理程序的操作

文章目录事件传播事件传播顺序事件传播类型事件捕获事件冒泡示例终止事件传播事件传播事件传播顺序事件传播的顺序是先执行事件捕获，然后执行事件冒泡。

一、事件捕获/冒泡事件捕获：事件捕获会由最先接收到事件的元素然后传向最里边（我们可以将元素想象成一个盒子装一个盒子，而不是一个积木堆积）事件冒泡：事件冒泡即由最具体的元素（文档嵌套最深节点）接收，然后逐步上传至

一个泡泡他是不是会从低到高往上升，那么事件冒泡机制就是事件往上升：在JavaScript中一棵DOM树他的事件被激活就会往上传递信息层层往上传递，直至传递到dom的根节点。

第一阶段：从window对象传导到目标节点，称为“捕获阶段”第二阶段：在目标节点上触发，称为“目标阶段”第三阶段：从目标节点传导回window对象，称为“冒泡阶段”事件委托（事件代理）本质上是利用了浏览器事件冒泡的机制

模型事件传播先后沿着两个方向传播：在第一阶段，也就是事件捕获阶段，事件从最顶层的对象依次向下传播，因此先触发顶层对象的事件处理函数，然后依次向下，直到传播到事件所发生的最底层对象；接着进入第二阶段，也就是事件冒泡阶段

你在学习和编写JavaScript时可能听说过事件冒泡（eventbubbling）。它会发生在多个元素存在嵌套关系，并且这些元素都注册了同一事件(例如click)的监听器时。

开发环境Win10element-ui"2.8.2"Vue2.9.6事件冒泡简介如下图，当我们点击页面某个元素时，会产生点击事件，事件由外到内，逐层递进（事件捕获阶段，途中的1->2->3->4），当目标元素捕捉到目标事件时

首先了解一下事件冒泡与事件捕获事件冒泡：即事件会从最内层的元素开始发生，一直向上传播，直到document对象，最终可以冒泡到window上。

eventpropagation事件冒泡element.addEventListener('click',listener,useCapture);useCapture默认是false,表示使用bubble

事件冒泡什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播

1.项目的一些问题2.事件冒泡和时间捕获的原理以及怎么实现3.const的应用4.箭头函数this的指向5.webpack怎么打包识别入口文件-识别模块依赖-对模块解析执行-编译生成AST（抽象语法树）

事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。

很多小白在入门的时候容易踩坑，特别是在开发一个处女作项目的时候，要么是曾经已经系统性学习过的知识运用不上，要么是没留意某属性的使用场景导致这样那样的报错等等总之在不断修修补补后，最终被你成功堆出了一坨shi山代码比如最简单的事件冒泡

事件代理又叫事件委托，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

2.防止touchmove过程中触发pagescroll目前小程序不支持prevetDefault和stopPropagation解决方案：在需要滑动操作的元素外部包裹来阻止事件冒泡3.小程序中canvs2d

事件总括*1、行为本身：浏览器天生就赋予其行为onclickonmouseoveronmouseout(onmouseenteronmouseleave不会产生事件冒泡)onmousemove*onmousedownonmouseuponmousewheelonscrollonresizeonloadonunloadonfocusonbluronkeydownonkeyup

把一个元素响应事件（click、keydown......）的函数委托到另一个元素一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上

this.name)//this方法在这里指当前vue实例alert(event.target.tagName);//event是原生DOM事件}访问原生DOM事件用$event获取事件修饰符//阻止单击事件冒泡

1阻止事件冒泡//catchtap替换bindtap点击操作2wx.previewImage点击显示大图(放大黑屏解决)//wxmlasyncpreviewImg(e){letindex=e.currentTarget.dataset.index

一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数

1.事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。Clickme!

@3事件冒泡：最后从目标节点往顶层元素传递，通常函数在此阶段执行.addEventListener第三个参数默认false(冒泡阶段执行)，true(捕获阶段执行)。

在Vue2.4之前都是使用的microtasks，但是microtasks的优先级过高，在某些情况下可能会出现比事件冒泡更快的情况，但如果都使用macrotasks又可能会出现渲染的性能问题。

HTML事件的例子：当用户点击鼠标时当网页已加载时当图像已加载时当鼠标移动到元素上时当输入字段被改变时当提交HTML表单时当用户触发按键时事件冒泡事件冒泡.grandfather{width:300px

vue的官方文档上找到了render的解释[事件&按键修饰符].render函数中自带event事件，不用传参。不用写e，直接event.stopPropagetion()就可以了。{title:'中继',minWidth:100,align:'center',//key:'',render:(h,params)=>{let_this=this;letlinkListArray=params.ro

1.1.事件高级1.1.1.注册事件（2种方式）1.1.2事件监听addEventListener()事件监听（IE9以后支持）eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。attacheEvent()事件监听（IE678支持）eventTarget.attachEvent(

1.捕获2.目标：具体的元素本身3.冒泡事件捕获：当使用事件捕获时，父级元素先触发，子元素后触发事件冒泡：当使用事件冒泡时，子级元素先触发，父元素后触发事件传播的阻止方法：再W3C中，使用stopPropagation

理解：react中的事件都是合成事件，不是把每一个dom的事件绑定在dom上，而是把事件统一绑定到document中，触发时通过事件冒泡到document进行触发合成事件，因为是合成事件，所以我们无法去使用

1事件的冒泡和捕获.事件冒泡：作用于子标签的事件会传递给父标签；如果希望作用于子标签的事件不传递给父标签，需要在子标签中对事件进行捕获事件捕获:事件对象.stopPropagation()document.getElementById

插槽：将一个react元素渲染到指定的DOM容器中ReactDOM.createPortal(React元素，真实的DOM容器)，该函数返回一个React元素**注意事件冒泡**1.React中事件是包装过的

Document.grandfather{width:300px;height:300px;background-color:green;position:relative;}.father{width:200px;height:200px;background-color:gold;}.son{width:100px;height:100px;background-color:red;posit

修饰符stop阻止事件冒泡。prevent阻止默认事件once只执行一次。v-bind简写:，:属性，常用于样式，组件传值。:style:xxx样式可用对象，数组进行配置。

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？

DOM事件流传播的三个过程：事件捕获阶段——》处于目标阶段——》事件冒泡阶段。

事件修饰符：.stop//阻止事件冒泡.prevent//阻止默认事件.capture.self.once.passive......还有些按键修饰符可以看官方文档，有版本要求https://cn.vuejs.org

事件冒泡！

IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流事件冒泡即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点---《JavaScript高级程序设计》点击我如上面代码结构所示

解决方法：使用原生的事件监控functionMyBody(props:any){constScrollRef=useCallback((node)=>{if(!node){return;}node.addEventListener("touchstart",onTouchStart);node.addEventListener("touchmove",onTouchMove);},[]);cons

事件捕获，从dom结构上到下，window.addEventListener先于document.addEventListener被捕获事件冒泡，从dom结构底层向上传递，document.addEventListener

事件高级▲1.注册事件(绑定事件)1.1注册事件概述给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式传统注册方式利用on开头的事件onclickbtn.onclick=function(){}特点：注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c标准推荐方式addEventListe

思路：就是在页面滚动时停止touchend事件冒泡。这样就能够防止触发to

解决方法：一开始想到可能是事件冒泡，参考文章：http

目录如何阻止事件冒泡科普阻止click事件冒泡(防止触发另一个事件)的方法方法一方法二如何阻止事件冒泡当父子元素中都有点击事件的时候，为了让触发子元素中的事件时，不去触发父元素中的事件，可以在子元素事件中添加

fileContainer.querySelector('input');functionpreventDefaults(e){e.preventDefault();//阻止系统默认（行为）e.stopPropagation();//阻止js事件冒泡

1.渲染器的基本概念2.自定义渲染器3.渲染器的挂载与更新4.HTMLAttributes和DOMProperties5.对class属性的设置6.卸载操作7.区分vnode的类型8.对事件的处理9.事件冒泡机制

lazy则是在keyup就更新；例如：{{msg}}.number直接把输入的数值从字符串获取其他类型转为number类型，{{msg}}.trim自动过滤用户输入的首位空格2，事件中的修饰符：//阻止事件冒泡

prevent：阻止默认事件（常用）stop：阻止事件冒泡（常用）once：事件只触发一次（常用）capture：使用事件的捕获模式self：只有event.target是当前操作的元素时才触发事件passive

@click.stop阻止事件冒泡（相当于event.stopPropagation()）{{username}}constvm=newVue({el:".parent",data:{username: