javaScript里面的“事件冒泡”和“事件捕获”机制

一，事件冒泡

1.  什么是事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

2.  为什么会出现事件冒泡这一机制

（1） 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

 1 <div οnclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
 2 <div id="inSide" style="width:100px; height:100px; background:#CCC"></div>
 3 </div>
 4 <script type="text/javascript">
 5 //本例子只在外面盒子定义了处理方法，而这个方法一样可以捕获到子元素点击行为并处理它。假设有成千上万子元素要处理，难道我们要为每个元素加“οnclick="eventHandle(event)"”？显然没有这种集中处理的方法来的简单，同时它的性能也是更高的。
 6 function eventHandle(e)
 7 {
 8     var e=e||window.event;
 9     var obj=e.target||e.srcElement;
10     alert(obj.id+' was click')
11 }
12 </script>

（2） 让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情，就像老板一下命令，各自员工做自己岗位上的工作去了。

 1 //显示为：
 2 //My name is inSide,I was working...'
 3 //My name is outSide,I was working...'
 4 <div οnclick="outSideWork()" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
 5 <div οnclick="inSideWork()" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
 6 </div>
 7 <script type="text/javascript">
 8 function outSideWork()
 9 {
10     alert('My name is outSide,I was working...');
11 }
12 
13 function inSideWork()
14 {
15     alert('My name is inSide,I was working...');
16 }
17 
18 </script>

3.  如何阻止事件冒泡

因为ie浏览器和其他的浏览器的阻止事件冒泡的函数的不一样的，所以用一个if...else...语句来阻止事件冒泡

1 //阻止事件冒泡函数
2 function stopBubble(e)
3 {
4     if (e && e.stopPropagation)
5         e.stopPropagation()
6     else
7         window.event.cancelBubble=true
8 }

 

 

二、 事件捕获

1. 什么是事件捕获

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

true : 捕获阶段

false : 冒泡阶段

事件捕获实际上并不常用，一般使用事件冒泡就可以了

 

转载于:https://www.cnblogs.com/Olivialoveme/p/7099652.html