在浏览器客户端应用平台，基本生都是以事件驱动的，即某个事件发生，然后做出相应的动作。
浏览器的事件表示的是某些事情发生的信号。事件的阐述不是本文的重点，尚未了解的朋友，可以访问W3school教程 进行了解，这将有助于更好地理解以下的内容 。
2.冒泡机制
什么是冒泡呢？
下面这个图片大家应该心领神会吧，气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。
相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层 层层往上传递，直至传递到dom的根节点。
简单案例分析
下面通过一个简单的例案例来阐述冒泡原理：
定义一个html, 里面有三个简单的dom 元素：div1,div2, span，div2包含span，div1 包含div2；而它们都在body 下：
<body> <div> <div> <span>This is a span.</span> </div> </div> </body>
界面原型如下：
在这个基础上，我们实现下面的功能：
a.body添加 click 事件监听，当body捕获到event事件时，打印出事件发生的时间和 触发事件的节点信息：
<script type="text/javascript">
window.onload = function() {
document.getElementById("body").addEventListener("click",eventHandler);
}
function eventHandler(event) {
console.log("时间："+new Date(event.timeStamp)+" 产生事件的节点：" + event.target.id +" 当前节点："+event.currentTarget.id);
}
</script>
当我们依次点击"This is span"，div2，div1，body后，输出以下信息：
分析以上的结果：
无论是body，body 的子元素div1，还是 div的子元素div2，还有 span, 当这些元素被点击click时，都会产生click事件，并且body都会捕获到，然后调用相应的事件处理函数。就像水中的气泡从底往上冒一样，事件也会往上传递。
事件传递的示意图如下所示：
一般地，事件在传递过程中会有一些信息，这些是事件的组成部分：事件发生的时间+事件发生的地点+ 事件的类型+事件的当前处理者+其他信息，
完整的html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.11.0.js"></script> <title>Insert title here</title> <style type="text/css"> .box1 { border: green 40px solid; width: 300px; height: 300px; margin: auto; } .box2 { border: yellow 40px solid; width: 220px; height: 220px; margin: auto; } span { position: relative; left: 50px; top: 50px; background-color: rgba(128, 128, 128, 0.22); } </style> <script type="text/javascript"> window.onload = function() { document.getElementById("body").addEventListener("click",eventHandler); } function eventHandler(event) { console.log("时间："+new Date(event.timeStamp)+" 产生事件的节点：" + event.target.id +" 当前节点："+event.currentTarget.id); } </script> </head> <body> <div> <div> <span>This is a span.</span> </div> </div> </body> </html>
b.终止事件的冒泡
我们现在想实现这样的功能，在div1 点击的时候，弹出 "你好，我是最外层div。"，点击div2 的时候，弹出 "你好，我是第二层div"；点击span 的时候，弹出"您好，我是span。"。
由此我们会有下面的javascript片段：
<script type="text/javascript"> window.onload = function() { document.getElementById("box1").addEventListener("click",function(event){ alert("您好，我是最外层div。"); }); document.getElementById("box2").addEventListener("click",function(event){ alert("您好，我是第二层div。"); }); document.getElementById("span").addEventListener("click",function(event){ alert("您好，我是span。"); }); } </script>
预期上述代码会单击span 的时候，会出来一个弹出框 "您好，我是span。" 是的，确实弹出了这样的对话框：
然而，不仅仅会产生这个对话框，当点击确定后，会依次弹出下列对话框：