event中的stopPropagation和preventDefault
很多初学js的或者是很少用到阻止冒泡的或者是工作了蛮久还是对js并不是那么了解的童鞋，可能对stopPropagation和preventDefault的作用并不是那么清晰，在很多小伙伴都问了之后，决定还是把这两个小东西梳理出来。在梳理之前，我觉得我们有必要理解一下什么是冒泡。
来，先理论知识走起来！
一、DOM事件模型
一共有3个阶段：
1、捕获：从window开始，由外向内，依次记录各级元素绑定的事件处理函数。
强调：捕获阶段只到目标元素截止
2、目标触发：默认实际触发事件的元素上的处理函数先执行。
目标元素：实际触发事件的元素
3、冒泡：按照捕获阶段反向的顺序，从目标元素的上一级开始，依次执行各级父元素上的事件处理函数
注意：IE8的事件模型只有2个阶段：目标触发和冒泡。
二、什么是事件的默认行为
在我的理解内（若有理解不对的地方，欢迎交流，共同进步！），事件的默认行为就是没有用 js 定义过但是可以执行的原本就已经定义好的行为，例如点击 a 标签会跳转，点击 type=”text” 的 input 可以输入等等，这些都没有用 js 去定义过什么点击事件或者获取焦点事件或者其他什么事件，但依然可以实现点击跳转等这些行为，而这些就是事件的默认行为。
三、stopPropagation
取消冒泡：执行完当前元素的事件处理函数后，阻止冒泡向上执行
四、preventDefault
取消默认行为：阻止后续默认行为，在函数内放前放后，对当前函数无影响
对基本的理论有大致概念之后，那么我们现在通过一个栗子来了解它们带来的效果。
五、栗子分析
css部分：
<style>
a{
display: inline-block;
width: 200px;
height: 100px;
background-color: #953b39;
}
span{
display: inline-block;
background-color: #abbbbb;
margin: 35px 70px;
width: 60px;
height: 30px;
font-size: 20px;
}
style>
html部分：
<body>
<a href="http://blog.csdn.net"><span>看这里span>a>
body>这是未加js的时候，效果图为：
现在给这个a元素和span元素分别添加点击事件：
var a = document.getElementsByTagName("a")[0];
var span = document.getElementsByTagName("span")[0];
a.onclick = function (e) {
alert("click a");
};
span.onclick = function (e) {
alert("click span");
}此时点击span效果依次为：
“click span”->“click a”->跳转页面到http://blog.csdn.net
1、如果我们想要点击span，不触发a的点击事件，也就是想要的最终效果依次为：
“click span”->跳转页面到http://blog.csdn.net
那么，我们可以在span的点击事件中加上e.stopPropagation()，阻止点击事件冒泡到a上，代码如下：
span.onclick = function (e) {
e.stopPropagation();
alert("click span");
}通俗点说，如果想要点击span不触发它父元素（所有父元素）上面的点击事件，可以加上e.stopPropagation()。
2、如果我们想要点击span，不让页面跳转，也就是想要的最终效果依次为：
“click span”->“click a”
那么，我们可以在span的点击事件中加上preventDefault，代码为：
span.onclick = function (e) {
e.preventDefault();
alert("click span");
}也就是阻止了事件的默认行为。
3、如果想要点击span，只触发span的点击事件，也就是想要的最终效果为：
“click span”
那么，就可以把stopPropagation和preventDefault都加上，代码为：
span.onclick = function (e) {
e.stopPropagation();
e.preventDefault();
alert("click span");
}
（分享完毕）
最后
我的心愿是
希望程序员不再头顶秃地，而是头顶茂密！