事件捕获（capture）和冒泡事件(Bubble)

PS：这里是我从别人的博客中学习事件捕获和冒泡是的总结，如果你也感兴趣的话，建议你点击链接查看原博客的内容，他们写的都是很经典！

对“捕获”和“冒泡”这两个概念，我想我们对冒泡更熟悉一些，因为在我们使用的所有浏览器中，都支持事件冒泡，即事件由子元素向祖先元素传播的，就像气泡从水底向水面上浮一样。而在像firefox,chrome,safari这类所谓的标准浏览器中，事件传播还有个阶段，那就是捕获阶段，这个很少有用武之地，所以被人疏忽遗忘也在所难免了，不常用不代表它不存在，本着科学严谨的态度，我们有必要去看一下它的庐山真面目。

事件捕获

事实上，捕获阶段是一个和冒泡阶段完全相反的过程，即事件由祖先元素向子元素传播，和一个石子儿从水面向水底下沉一样，要说明的是在 IE，opera浏览器中，是不存在这个阶段的。从各浏览器提供的注册事件监听的方法中可见一斑，例如适用于ie,opera的attachEvent，有两个参数，attachEvent(”on”+type,fn)，而适用于所谓标准浏览器的addEventListener则有三个参数，addEventListener(type,fn,boolean)，前面两个参数不用解释，第三个参数boolean，就是决定注册事件发生在捕获阶段还是冒泡阶段，具体参考如下：

true : 捕获阶段

false : 冒泡阶段

<html><head>

<title></title><style type="text/css">            *{margin:0px;padding:0px;}            h1{text-align:center;color:#666;margin-top:18px;}            #content{width:700px;height:250px;border:5px solid green;margin:20px auto;position:relative;}            #obj1{height:100px;background:#d5d5d5;}            #obj2{background:#777;}            #obj3{position:absolute;top:200px;left:150px;width:200px;background:#555;}            #obj4{height:100px;background:#999;margin-top:50px;}            .active{color:#f00}</style>

</head><body><h1>悟透事件的捕获和冒泡</h1><div id="content"><div id="obj1"><h2>元素a</h2>   <div id="obj2"><h2>元素b</h2><div id="obj3"><h2>元素c</h2></div></div></div><div id="obj4"><h2>元素d</h2></div></div><script type="text/javascript">var divs=document.getElementById("content").getElementsByTagName("div");var count=1;for(var i=0;i<divs.length;i++){             bindEvent(divs[i],"click",function(){var obj=document.createTextNode("->"+count++);this.getElementsByTagName("h2")[0].insertBefore(obj,null);this.className="active";                     });         }//取消冒泡事件function stopBubble(e){               e=e||window.event;  //firefox,chrome,etc.||IE,operaif(e.stopPropagation){                   e.stopPropagation();                 }else{                  e.cancelBubble=true;                 }             }

//绑定事件function bindEvent(elem,type,fn){if(elem.attachEvent){var typedRef="_"+type;if(!elem[typedRef]){                         elem[typedRef]=[];                     }for(var i in elem[typedRef]){if(elem[typedRef][i]==fn){return;                             }                         }                         elem[typedRef].push(fn);                         elem["on"+type]=function(){for(var i inthis[typedRef]){this[typedRef][i].apply(this,arguments);                             }                         }                    }else{                       elem.addEventListener(type,fn,false);//改为true 就是捕获事件了                     }             }</script></body>

</html>

取消冒泡事件
这时从《这里》看到的，然后自己打了一次代码加深印象的
在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。

<html><head><title><style type="text/css">                *{ margin:0px; padding:0px;}</style></title></head><body><div id="obj1" style="width:500px;height:500px; background:#000;"><div id="obj2" style="width:400px;height:400px; background:red;"></div></div><script type="text/javascript">function stopBubble(e){//如果传入了事件对象，那么就时非IE浏览器if(e&&e.stopPropagtion){                          e.stopPropagtion();                         }else{                           window.event.canceBubble=true;                         }                 }var obj1=document.getElementById_x_x('obj1');var obj2=document.getElementById_x_x('obj2');obj1.onclick=function(){    alert('我点击了obj1');}obj2.onclick=function(e){  alert('我点击了obj2');  stopBubble(e);}</script></body></html>

转载于:https://www.cnblogs.com/Jason-Damon/archive/2011/11/20/2255952.html

事件捕获（capture）和冒泡事件(Bubble)相关推荐

JavaScript事件冒泡、事件捕获和阻止默认事件
谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 冒泡篇先来看一段实例: js: var $input = document. ...
128-Vue中的事件修饰符-阻止冒泡事件
128-Vue中的事件修饰符 .stop 阻止事件冒泡(*) .prevent 阻止默认事件(*) .prevent.stop 阻止默认事件的同时阻止冒泡 .once 阻止事件重复触发(once与st ...
javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序
JavaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 jav ...
JavaScript之事件冒泡和事件捕获详细介绍
怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别,有需要的朋友可以参考一下 (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...
JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...
js 事件流的事件冒泡和事件捕获与阻止事件传播
为了方便引入事件流的概念,我们先来说说什么是事件. 事件就是用户或浏览器自身执行的某种动作.换句话说,我们在浏览网页或者 APP 时,通常会在设备上产生很多交互性的操作,例如点击.选择.滚动屏幕.键盘 ...
JS高级：事件冒泡和事件捕获；
1.事件:浏览器客户端上客户触发的行为成为时事件:所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做 ...
JavaScript事件捕获与事件冒泡原理 IE和DOM之间存在哪些主要差别
事件--怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别. (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -&g ...

事件捕获（capture）和冒泡事件(Bubble)

事件捕获（capture）和冒泡事件(Bubble)相关推荐

最新文章

热门文章