首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

JS的事件冒泡捕获

事件机制 ---- 事件触发三个阶段: window往事件触发处传播,遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往window传播,遇到注册的冒泡事件会触发 事件触发一般会按照...|------------------------------------------- 但是有一个特例:如果给body中的子节点同时注册冒泡捕获事件,事件触发会按照注册的顺序执行。...// 以下会先打印冒泡然后是捕获node.addEventListener( 'click', event => { console.log('冒泡') }, false)node.addEventListener...和outer上面,而且这两个事件处理函数的useCapture选项为true,说明他们被注册在捕获阶段的。...此时进入冒泡阶段,inner上的时间处理器得到执行 事件命中元素后开始向上冒泡,一路查找是否注册了冒泡阶段的祖先元素上的时间处理器。由于没有找到因此什么也没发生。

2.5K20

事件冒泡事件捕获

javascript 的事件捕获和事件冒泡之前一直没能弄明白,知道看到一个例子。...利用丢一颗石头入水的例子,就能够非常形象了,如图所示: 事件捕获和事件冒泡就像是一颗石头(点击事件)投入水中: 首先是最外层水面(html)接触(捕获)石头,然后石头下沉,内层的水(body/dom...当石头到达池塘底部(事件被捕获)之后,产生了一个气泡,然后就开始了冒泡阶段 由底部(目标元素)产生的气泡,由内而外,不断向上冒泡,直到最外面(html标签)结束。...点击可查看示例 去示例中试一试便清楚了~ 处理事件 理解了事件的捕获冒泡机制,对于事件处理就好办了。...capture 表示是否在捕获阶段处理函数 ps:默认为 false,表示在冒泡阶段处理函数,ie 低版本浏览器不支持在捕获阶段处理函数。

1.7K10

JS事件,你真的懂吗(捕获冒泡)?

说到js事件大家肯定都知道,那么今天讲一点大家不知道的(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获冒泡。...那么问题来了,我们通常看到的事件都是直接触发之后就执行了,那么我们怎么才能看到事件的捕获冒泡都是怎么进行的呢,这里给大家准备了一个例子 addEventListener() 例子之前首先给大家简单介绍一下...true表示监听事件的捕获阶段,false表示监听事件的冒泡阶段。 返回值 没有返回值 示例: <!...然后是inner冒泡阶段 最后是outer冒泡阶段 由此我们可以看到,事件触发的时候实际上都是有捕获冒泡阶段的,并且捕获阶段会从最外层的父级元素开始捕获,一直捕获到最后触发事件的那个元素点才会停止,...并且事件的触发是先捕获,在冒泡。 阻止事件冒泡 事件的冒泡会让我们实现某些功能的时候产生阻碍,那么我们怎么怎么阻止事件的冒泡呢,这个时候就会用到一个方法。

2.2K20

【说站】javascript事件捕获是什么意思

javascript事件捕获是什么意思 说明 1、事件捕获是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事。 2、事件捕获的用意在于事件到达预定目标之前捕获它。...在捕获中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: 元素的点击事件先触发 ,然后再触发元素的点击事件。...parent.addEventListener("click",function(e){   console.log("click-parent---事件传播"); },false);               //新增事件捕获事件代码...parent.addEventListener("click",function(e){   console.log("click-parent--事件捕获"); },true);   child.addEventListener...("click",function(e){   console.log("click-child"); },false); 以上就是javascript事件捕获意思,希望对大家有所帮助。

47950

阻止mouseover冒泡行为_onmousedown是什么意思

该事件通常 onmouseleave(在鼠标指针离开绑定事件的那个元素上时触发) 事件一同使用。 onmouseenter 事件类似于 onmouseover 事件。... mouseenter 事件中有在鼠标指针进入 div 元素时触发(不冒泡)。...span),因为事件冒泡到父级div。...; } }); 比较: 从事件传递上看:方法一在于取消事件冒泡,即当某些节点取消冒泡后,事件不会再向上传递;方法二在于不阻止冒泡,过滤需要处理的事件,事件处理后还会继续传递; 分析方法二...,既然事件是冒泡传递的,那可不可以让某个父节点统一处理事件,通过判断事件的发生地(即事件产生的节点),然后做出相应的处理呢?

1.5K20

JS事件流、事件冒泡、阻止冒泡、事件捕获(一看就懂)

讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流,这样会更容易明白 一、事件和事件流 1、什么是事件 事件是可以被 JavaScript 侦测到的行为。...一个完整的JS事件流是从window开始,最后回到window的一个过程。 事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。...三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾,就可以做到阻止冒泡事件。...讲事件捕获之前先了解下addEventListener()方法: addEventListener()定义用法 document.addEventListener() 方法用于向文档添加事件句柄。...布尔值,指定事件是否在捕获冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false - 默认。

10.1K53

前端day16-JS(WebApi)学习笔记(事件补充、事件冒泡捕获

)跟冒泡捕获有关 //如果有同名事件不会覆盖,而是会依次执行 //IE8及以前的版本不支持 btn.addEventListener ( "click", function (...1.事件冒泡:从触发事件元素,一级一级往上找父元素触发同名事件,如果有就触发 2.事件捕获:从最顶级的父元素一级一级往下找子元素触发同名事件,直到触发事件的元素为止 事件捕获事件冒泡触发事件的顺序完全相反...3.事件捕获,只能通过addEventListener并且参数写true才是事件捕获 其他都是冒泡(不是通过addEventListener添加、addEventListener参数为false) 4....事件对象.stopPropagation() 除了可以阻止冒泡还可以阻止捕获 5.IE8及以前没有捕获!...3.先从最顶级往下一级一级捕获,然后到目标的捕获,目标的冒泡,再一级一级往上冒泡 <input type="button" value="

1.7K00

hybrid.js_js交互是什么意思

文章目录 Hybrid开发—WebViewjs交互实现 一、 引言 二、WebViewjs交互 一、WebView 二、交互小Demo 三、具体实现 1、首先是界面xml 布局 2、初始化webView...方法调用 Android 代码(4.2及以上的系统才能使用) 总结: Hybrid开发—WebViewjs交互实现 一、 引言 Hybrid App(混合模式移动应用)是指介于web-app、native-app...二、WebViewjs交互 一、WebView WebView组件是Android提供用于显示网页信息,它内置了WebKit引擎,WebKit是一个开源的浏览器引擎,Chrome浏览器也是基于它,所以我们可以把...二、交互小Demo 下面我们进入正题,WebView 是如何JS 进行交互的。请看下面这个图片: 蓝色的部分是WebView控件,加载的是本地的一个HTML 网页。...WebViewjs 整个的交互过程。

10.1K30

【说站】js引擎是什么意思

js引擎是什么意思 概念 1、JS引擎主要对JS代码进行语法、语法等分析,通过编译器将代码编译成可行的机码,使计算机执行。...2、JS引擎通常包括以下部分 编译器:将源代码编译成抽象语法树,在一些引擎中将抽象语法树转换成字节代码。 解释器:解释器主要接收字节代码,说明执行字节代码,同时依赖垃圾回收机制。...就像JVM虚拟机一样,JS也有堆栈和堆栈概念。 栈。用于存储方法调用的场所和基础数据类型(如vara=1)也存储在堆栈中,随着方法调用结束自动销毁(堆栈->方法调用后->堆栈)。 堆。...JS引擎分配给受众的内存空间是堆积的。比如varfoo={name:foo},这个foo所指向的对象是堆积的。 以上就是js引擎的意思,希望对大家有所帮助。...更多js学习指路:js教程 推荐操作环境:windows7系统、jquery3.2.1版本,DELL G3电脑。

4.7K20

你根本不懂Javascript(EP5 HTML事件捕获冒泡

事件捕捉冒泡 事件绑定机制 阻止冒泡 参考文献 事件捕捉冒泡捕获的必然是父节点, 然后一层层向下捕获, 然后一层层向上冒泡 这里是一个 td 被点击的效果图 图片 通过三个阶段:...捕捉阶段: 从父节点, 逐渐向目标节点冒泡, 即自上向下 接近目标 elem 阶段(这一阶段会同时激活第一阶段和第三阶段的 handler) 冒泡阶段: 从子节点向父节点冒泡 事件绑定机制 onXXX...true: handler 放置在捕捉阶段 仅仅对于elem.on(event, selector, handler), 只需要return false可以既阻止默认事件, 又防止冒泡 阻止冒泡...一般不需要阻止冒泡, 因为阻止冒泡之后,可能影响其他事件捕捉机制 组织冒泡的核心在于这个函数:event.stopPropagation() 阻止冒泡之后, 事件将不会继续传递 下面这一段就不会调用到...-- Click me --> 另外几种阻止冒泡的用法: // 既阻止冒泡, 又阻止默认事件, 仅仅对于

36540
领券