web前端|js教程
JavaScript,事件冒泡,事件捕获
web前端-js教程
php无数据库留言板源码,vscode提示问题,ubuntu查看分区占用,tomcat 运营出错,sqlite实体模型,jquery 饼状图插件,前端框架react怎么用,爬虫灯罩价格,php 7安装,seo 空格,二维码在线生成网站源码,网页防右键,动网8.3门户模板,wifi认证页面源码,易语言怎么制作管理系统,h5游戏程序源码lzw
《javascript视频教学》
论坛发帖管理系统源码,mac中安装VScode,ubuntu开放ftp,tomcat配置登陆,sqlite 一行转多列,厨房地上半夜爬虫子怎么办,php 获取 硬件,seo营销策划排名,模板和网站是一体的吗,简单手机网页设计模板lzw
JS事件流原理图：
php邮箱服务商源码,ubuntu磁盘io情况,不同爬虫对uvb,traint php,seo young suklzw
由此可知道，一个完整的JS事件流是从window开始，最后回到window的一个过程；事件流被分为三个阶段：捕获过程（1~5）、目标过程（5~6）、冒泡过程（6~10）；
事实上，捕获过程和冒泡过程是完全相反的过程，即事件由父元素向子元素传播和子元素向父元素传播的过程。
事件捕获
事件捕获在事件绑定的第二种形式下才能实现
事件捕获div{padding:40px;} #div1{ background: red; } #div2{ background:green; } #div3{background: blue;}window.onload=function(){ var oDiv1=document.getElementById(div1); var oDiv2=document.getElementById(div2); var oDiv3=document.getElementById(div3); function fn1(){alert(this.id); } //点击div3部分时，分别弹出div1，div2，div3 oDiv1.addEventListener(click,fn1,true);//为true时，是事件捕获 false=冒泡 oDiv2.addEventListener(click,fn1,true); oDiv3.addEventListener(click,fn1,true); }
上面例子中，点击p3时，p1会接收到两个点击事件，一个是在捕获阶段触发了p1的点击事件，一个是在冒泡阶段触发了p1的点击事件；addEventListener中的第三个参数：true—-捕获，false—–冒泡；上面设置为true即捕获阶段的点击事件被触发了
注：p1会接收到两个点击事件与是否触发该事件无关
再来个例子：
事件捕获div{padding:40px;} #div1{ background: red; } #div2{ background:green; } #div3{background: blue;}window.onload=function(){ var oDiv1=document.getElementById(div1); var oDiv2=document.getElementById(div2); var oDiv3=document.getElementById(div3);oDiv1.addEventListener(click,function(){alert(1); },false); oDiv1.addEventListener(click,function(){alert(3); },true); oDiv3.addEventListener(click,function(){alert(2); },false); //点击div3，分别弹出3,2,1 }
点击p3，查看弹出的结果分别是：3、2、1
点击p3时，p1会接收到两个点击事件，在捕获阶段（true），触发了p1的点击事件，弹出结果：3；在冒泡阶段，触发了p3的点击事件，弹出结果：2，然后触发了p1的点击事件，弹出结果：1
事件冒泡
当一个元素接受到事件的时候，会把它接收到的所有事件传播给它的父级，一直到顶层window，叫事件冒泡机制；
例子：
事件冒泡div{padding:40px;} #div1{ background: red; } #div2{ background:green; } #div3{background: blue;}window.onload=function(){ var oDiv1=document.getElementById(div1); var oDiv2=document.getElementById(div2); var oDiv3=document.getElementById(div3); function fn1(){alert(this.id); } //事件函数绑定 oDiv1.onclick=fn1;//告诉div1，如果它接收到了一个点击事件，那它就去执行fn1 oDiv2.onclick=fn1; oDiv3.onclick=fn1;//div3,div1 事件冒泡 }
阻止冒泡：在当前要阻止冒泡的事件函数中调用event.cancelBubble=true;
阻止冒泡#div1{ width:100px; height:200px; border:1px solid red; display: none; }window.onload=function(){ var oBtn=document.getElementById(tn1); var oDiv=document.getElementById(div1); oBtn.onclick=function(ev){var oEvent=ev||event;//阻止当前事件函数事件冒泡oEvent.cancelBubble=true;oDiv.style.display=lock; } document.onclick=function(){/* setTimeout(function(){//观察事件冒泡：div出现一秒钟后隐藏了 oDiv.style.display=
one;},1000);*/oDiv.style.display=
one; } }
点击按钮div就出现，点击除按钮以外的部分div就消失
对比没有取消冒泡事件时的效果，下面用了延时器一遍观察效果
事件冒泡的运用
下面是一个网站中常见的功能——分享到
事件冒泡#div1{ width:100px; height:200px; background: red; position: absolute; left:-100px; top:100px; } #div2{ width:30px; height:60px; position: absolute; right:-30px; top:70px; background:#000000; color:#ffffff; text-align: center; }window.onload=function(){ var oDiv=document.getElementById(div1); oDiv.onmouseover=function(){this.style.left=0+px;//鼠标移动到div2时，div2接收到over、out事件时它自己不做，传播给父级div1执行 } oDiv.onmouseout=function(){this.style.left=-100+px; } }
分享到
编程视频！！
