什么叫事件冒泡？
以onclick事件为例：
我要通过给元素绑定点击事件改变某个元素的属性。
我在这个元素上点击一下。可是，这个元素节点外面被其它节点元素包裹，自身也包裹着其它节点元素，浏览器并不能判断它要改变那一层节点元素的属性。
这时，浏览器会从最里层节点元素开始，查找该节点元素是否具有响应点击事件的代码，如果没有，浏览器会向上一层查找，直到找到能够响应点击事件的代码为止。这个过程称为事件冒泡。
专业一点的解释就是事件从内到外传递的过程称为事件冒泡。
事件委托就是应用了事件冒泡。事件有一个target属性指向从内到外的所有层级节点，通过该属性我可以轻松定位到指该定层的节点，进而修改 该节点的属性。这样就实现了通过给父级节点绑定事件的方法实现对子级·节点属性的修改。
请看下面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table事件委托</title>
</head>
<body>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
<script type="text/javascript">
var table = document.getElementById("table");
table.onclick = function(e){
//隐含的事件对象event
//兼容的写法，event ,事件目标
var e = e || window.event;
var target = e.target || e.srcElement;
// console.log(target.tagName);
//查看元素的标签名，返回来的是大写的字符串
//document.body.tagName->"BODY"
if(target.tagName == "LI") {//判断事件目标是否我们所要添加事件的元素;
target.innerHTML =parseInt(target.innerHTML) + 10;
}
}
</script>
</body>
</html>阻止事件冒泡
当我们只希望触动某个节点元素，而不希望它向上传播时，可以通过以下方式来阻止冒泡。
使用on方式绑定的事件通过cancelBubble阻止冒泡。
使用addEventlisten绑定的事件可以用stopPropagation。
事件捕捉
事件捕捉和事件冒泡两则事件的传播方向相反，事件冒泡是由外向内传递，事件捕捉是由外向内传递。
事件捕捉阻止事件传播的方式。
on这种方式绑定的事件，都是添加到事件流中的冒泡阶段
addEventListener(type,handle,boolean)
boolean 为true，表示事件添加到捕获阶段
boolean 为false,表示添加到冒泡阶段