没有特别的幸运,那么就特别的努力!!!
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("进行查询")
}
})