我把这个实例分为几个步骤解读: 1、父组件的button元素绑定click事件,该事件指向notify方法 2、给子组件注册一个ref=“child” 3、父组件的notify的方法在处理时,使用了...$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg 4、子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中...父组件 import popup from "@/components... 父组件输入了:{{ item }} </
比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 ?...4.实际开发中我们很少使用事件捕获,我们更关注事件泡。...常情况下terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行), 这时候this指向的是父元素,因为它是绑定事件的元素对象...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。 生活中的代理: 咱们班有100个学生,快递员有100个快递, 如果一个个的送花费时间较长。...js事件中的代理: ? 事件委托的原理 给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素。
DOM事件流 html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。 ...那么是先执行父元素的单击事件,还是先执行div的单击事件 ??? 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。...比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 ?...常情况下terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行), 这时候this指向的是父元素,因为它是绑定事件的元素对象...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。 生活中的代理: ? js事件中的代理: ?
Click Me 当你点击了页面中的 div 元素,那么这个 click...中所述案例,则单击 div 元素后,事件触发顺序如下: document html body div 也就是在事件捕获过程中,document 对象首先接收到 click 事件,然后事件沿 DOM 树向下依次传播...还以上述代码为例,单击 div 元素后的触发顺序则是: ?...DOM事件流 在 DOM 事件流中,实际目标(div)在捕获阶段不会接收到事件,意味着在捕获阶段事件从 document 到 html 再到 body 就会停止。...输出结果 可是,当我们将子级的冒泡和捕获在js中位置调换后,输出的则是……子级先冒泡,再捕获!如下: ? 输出结果2 这是什么原因呢?? 下期——事件处理顺序,进一步揭晓。
在点击子元素时,浏览器运行了两种不同的阶段:捕获阶段和冒泡阶段。...捕获阶段的行为: 浏览器检查元素的最外层祖先,是否在捕获阶段中注册了一个onclick事件处理程序,如果是,则运行它; 然后,它移动到中单击元素的下一个祖先元素,并执行相同的操作...,然后是单击元素再下一个祖先元素,依此类推,直到到达实际点击的元素; 而冒泡与捕获恰恰相反: 浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序,如果是,则运行它; 然后它移动到下一个直接的祖先元素...因此上面代码在点击子元素时会先执行子元素绑定的事件,然后向上冒泡,触发父元素绑定的事件。 addEventListener 函数的第三个参数是个布尔值。...可能指向 div 元素,也可能指向它的子元素。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。 注意 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。 ...事件对象的使用 事件触发发生时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。 所以,在事件处理函数中声明1个形参用来接收事件对象。...在 IE6~8 中,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 中获取查找。...常情况下terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行), 这时候this指向的是父元素,因为它是绑定事件的元素对象...什么是事件委托 把事情委托给别人,代为处理。 事件委托也称为事件代理,在 jQuery 里面称为事件委派。 说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。
DOM事件流 html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。...比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 当时的2大浏览器霸主谁也不服谁!...常情况下terget 和 this是一致的,但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),这时候this指向的是父元素,因为它是绑定事件的元素对象...什么是事件委托 把事情委托给别人,代为处理。 事件委托也称为事件代理,在 jQuery 里面称为事件委派。 说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。...生活中的代理 js事件中的代理 事件委托的原理 给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素。
典型的例子有:页面加载完毕触发load事件;用户单击元素,触发click事件。 二、事件流 事件流描述的是从页面中接收事件的顺序。... 上面这段html代码中,单击了页面中的 元素, 在冒泡型事件流中click事件传播顺序为 —》—》—》document 在捕获型事件流中click事件传播顺序为...DOM标准规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。 事件捕获阶段:实际目标( )在捕获阶段不会接收事件。也就是在捕获阶段,事件从document到再到就停止了。...note: 1)、尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标,但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件...如果新增其他子元素(a,span,div等),直接修改事件代理的事件处理函数即可,不需要重新绑定处理器,不需要再次循环遍历。
DOM事件流 html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。...比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 ? 当时的2大浏览器霸主谁也不服谁!...事件对象的使用 事件触发发生时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。 所以,在事件处理函数中声明1个形参用来接收事件对象。 ?...常情况下terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行), 这时候this指向的是父元素,因为它是绑定事件的元素对象...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。 生活中的代理: ? js事件中的代理: ?
如上图所示,任意事件被触发时总会经历两个阶段:【捕获阶段】和【冒泡阶段】。 简言之,捕获阶段是【从父到子】的传导过程,冒泡阶段是【从子向父】的传导过程。...,其祖先元素的单击事件也【相继触发】,这是为什么呢?...结合事件流的特征,我们知道当某个元素的事件被触发时,事件总是会先经过其祖先才能到达当前元素,然后再由当前元素向祖先传递,事件在流动的过程中遇到相同的事件便会被触发。...再来关注一个细节就是事件相继触发的【执行顺序】,事件的执行顺序是可控制的,即可以在捕获阶段被执行,也可以在冒泡阶段被执行。...如果事件是在冒泡阶段执行的,我们称为冒泡模式,它会先执行子盒子事件再去执行父盒子事件,默认是冒泡模式。 如果事件是在捕获阶段执行的,我们称为捕获模式,它会先执行父盒子事件再去执行子盒子事件。
前言在JavaScript中,事件冒泡和事件捕获是两种不同的事件传播方式。当一个事件被触发时,它会从最内层的元素开始,然后逐级向外传播,直到最外层的元素。...在这个过程中,事件会经过每一个元素,直到它到达最内层的元素。在本文中,我们将详细了解事件冒泡和事件捕获,并探讨它们在JavaScript中的实现以及如何使用它们。...在事件冒泡中,事件处理程序会按照它们被注册的顺序执行,也就是说,先注册的事件处理程序会先执行。相反,在事件捕获中,事件处理程序会按照它们被注册的相反顺序执行,也就是说,后注册的事件处理程序会先执行。...这是因为事件从文档的最外层开始向内传播,然后经过外部div、内部div和按钮,直到它到达按钮。结论在JavaScript中,事件冒泡和事件捕获是两种不同的事件传播方式。...在事件冒泡中,事件处理程序会按照它们被注册的顺序执行;在事件捕获中,事件处理程序会按照它们被注册的相反顺序执行。我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!
单击触发react事件 React并不是将click事件绑在该div的真实DOM上,而是在document处监听所有支持的事件,当事件发生并冒泡至document处时,React...,而不是普通的冒泡,并且没有捕获阶段;只有在鼠标指针穿过被选元素时,才会触发。...ReactEvent 通过设置原生事件绑定为冒泡阶段调用,且每次测试单击子元素按钮: 在子元素原生事件程序中阻止事件传播,则打印出: 子元素原生事件绑定事件触发; 在父元素元素事件程序中阻止事件传播...,则打印出: 子元素原生事件绑定事件触发 父组件原生事件绑定事件触发 在子元素React合成事件onClick中阻止事件传播,则打印出: 子元素原生事件绑定事件触发 父组件原生事件绑定事件触发...子元素React合成事件绑定事件触发 在父元素React合成事件onClick中阻止事件传播,则打印出: 子元素原生事件绑定事件触发 父组件原生事件绑定事件触发 子元素React合成事件绑定事件触发
.stop - 阻止冒泡 .prevent - 阻止默认事件 .capture - 阻止捕获 .self - 只监听触发该元素的事件 .once - 只触发一次 .left - 左键事件 .right...-- 阻止单击事件冒泡 --> ... ... 按键修饰符 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
事件类型 (1)单击事件onClick 当用户单击鼠标按钮时,产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。...id="tg"> 理解事件的基本概念 如果单击了p标签,那么,如果是事件冒泡流的事件流机制,则click事件将按照如下顺序进行执行...如果采用捕获流的事件流机制,则click事件的执行顺序为:document —— html —— body —— div —— p 实例: <!...谈一谈事件方面如何优化性能——事件委托和事件处理程序的移除 在JavaScript代码当中,添加到页面中的事件越多,页面的性能也就越差。...换句话说,只要可单击的元素在页面中呈现出来了,那么它就立刻具备了相应的功能。 整个页面占用的内存空间会更少,从而提升了整体的性能。
为什么要进行事件委托? 首先实现一个小功能:在单击 HTML 的按钮后,把消息输出到控制台。...事件传播 当你单击下面 html 中的按钮时: Click...'Body click event in capture phase'); }, true); 在这个 Codesandbox 演示[2]中,单击按钮时,你可以在控制台中查看事件的传播方式。...你不需要把委托事件监听器直接附加到按钮上,而是可以委托父监听 。单击按钮时,父元素的侦听器将会捕获冒泡事件(还记得前面所说事件传播吗?)。...在例子中,event.currentTarget 是 。
一、事件 在了解什么是js中的事件流之前,我们先了解一下什么是js的事件。...三、事件流模型 在事件流中又有着两个模型 事件捕获 事件冒泡 这里我们引用一张图,以便于理解事件流模型 事件冒泡 当节点事件被触发时,会由内圈到外圈 div-->body-->html-->document...后来ECMAScript将两种模型进行了整合,制定了统一的标准:先捕获在冒泡 现在整合后的标准事件流就有了三个阶段: 事件捕获阶段(目标在捕获阶段不接收事件) 目标阶段 (事件的执行阶段,此阶段会被归入冒泡阶段...参数 描述 event 必须,字符串,指定事件名 function 必须,指定事件触发时要执行的函数 useCapture 可选值,指定事件是否在捕获或者冒泡阶段执行;1、true:事件句柄在捕获阶段执行...六、stopPropagation()阻止捕获 stopPropagation() 方法防止调用相同事件的传播。 传播意味着向上冒泡到父元素或向下捕获到子元素。
事件处理器 增加 1 {{ counter }} 次。...-- 阻止单击事件冒泡 --> ... ... <!
ref 给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上 Greet 内联js语句 Say hi 事件修饰符 .stop 阻止单击事件冒泡....prevent 不再重载页面 .capture 使用事件捕获模式 .self 只当事件在该元素本身(不是子元素)触发时触发 .once 事件只会触发一次 键值修饰符 .enter .tab .delete...> 修饰符 .lazy 从输入转变为在 change 事件中同步 .number 自动将用户的输入值转为 Number 类型 .trim 自动过滤用户输入的首尾空格 父子组件通信 props (父–>子...> on/emit (子–>父) 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件 不能用 $on 侦听子组件抛出的事件,而必须在模板里直接用 v-on 绑定 <button-counter
] 事件捕获和事件冒泡 当一个事件发生在具有父元素的元素上(例如,在我们的例子中是 child 元素)时,现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。...在捕获阶段: 浏览器检查元素的最外层祖先,是否在捕获阶段中注册了一个onclick事件处理程序,如果是,则运行它。...然后,它移动到中单击元素的下一个祖先元素,并执行相同的操作,然后是单击元素再下一个祖先元素,依此类推,直到到达实际点击的元素。...可以看到,现在 parent 的点击事件是冒泡阶段执行,child 的点击事件是在 捕获阶段执行。...元素的 addEventListener 方法中的第三个参数是 true 或者 false,对元素自己触发的事件流程都没有任何影响,只有在它的父元素或者子元素在触发相同的事件后才有影响。
领取专属 10元无门槛券
手把手带您无忧上云