没有特别的幸运，那么就特别的努力！！！
1.事件冒泡和事件捕捉
1.使用W3C标准的addEventListener，FF和Chrome浏览器都支持，IE6/IE7/IE8都不支持这个函数。不过从IE9开始就支持了这个标准的API。
addEventListener((type, listener, useCapture)
type=>事件（click）
listener=>函数
useCapture=>来设定，useCapture=false代表着事件冒泡，useCapture=true代表着采用事件捕获。
事件冒泡=> 函数执行，从里向外执行
事件捕捉=> 函数执行，从外向里
<script>
window.onload = function(){
var outA = document.getElementById("outA");
var outB = document.getElementById("outB");
var outC = document.getElementById("outC");
// 使用事件冒泡
outA.addEventListener('click',function(){alert(1);},false);
outB.addEventListener('click',function(){alert(2);},false);
outC.addEventListener('click',function(){alert(3);},false);
};
</script>
<body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
</div>
</div>
</body>
使用的是事件冒泡，当点击outC的时候，打印顺序是3–>2–>1。如果将false改成true使用事件捕获，打印顺序是1–>2–>3。
2.阻止事件冒泡和捕获
<div id="d1">1
<div id="d2">2
<div id="d3">3</div>
</div>
</div>
IE8以及以前可以通过 window.event.cancelBubble=true阻止事件的继续传播；
IE9+/FF/Chrome通过event.stopPropagation()阻止事件的继续传播。
<script>
window.onload = function(){
var outA = document.getElementById("outA");
var outB = document.getElementById("outB");
var outC = document.getElementById("outC");
// 目标
outC.addEventListener('click',function(event){
alert("target");
event.stopPropagation();
},false);
// 事件冒泡
outA.addEventListener('click',function(){alert("bubble");},false);
// 事件捕获
outA.addEventListener('click',function(){alert("capture");},true);
};
</script>
<body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
</div>
</div>
</body>
当点击outC的时候，之后打印出capture–>target，不会打印出bubble。因为当事件传播到outC上的处理函数时，通过stopPropagation阻止了事件的继续传播，所以不会继续传播到冒泡阶段。
答疑——猜猜下面代码结果
<script>
window.onload = function(){
var outA = document.getElementById("outA");
var outB = document.getElementById("outB");
var outC = document.getElementById("outC");
// 目标
outC.addEventListener('click',function(event){alert("target");},false);
// 事件冒泡
outA.addEventListener('click',function(){alert("bubble");},false);
// 事件捕获
outA.addEventListener('click',function(){alert("capture");event.stopPropagation();},true);
};
</script>
<body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
</div>
</div>
</body>
执行结果是只打印capture
3.事件委托（提高性能）
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
//事件触发
var list = document.getElementById("list");
list .on("click",function(e){
console.log(e)
var e = e || window.event;
e.target = e.target || e.srcElement;
var Li = e.target.nodeName.toLowerCase();
if(Li == "li"){
hideS();
console.log("进行查询")
}
})
