currentTarget和target的异同
currentTarget和target有什么不同呢,通过这个歌例子可以了解到
HTML
<div id='kixi-1' style='padding:10px;'>
<div id='kixi-2' style='width:260px;padding:10px;color:#fff;'>
没有阻止冒泡
<div id='kixi-3' style='width:200px;height:100px;padding:10px;'>
阻止冒泡了
</div>
</div>
</div>
CSS
/*
清晰网
kixi.com.cn
从javascript开始
*/
#kixi-1{background-color:red;}
#kixi-2{background-color:blue;}
#kixi-3{background-color:green;}
JavaScript
//target和currentTarget的区别,target是鼠标当前的对象,currentTarget是可以通过冒泡传递的,看实例演示
var k1 = document.getElementById("kixi-1");
var k2 = document.getElementById("kixi-2");
var k3 = document.getElementById("kixi-3");
function kixi_alert(e){
alert(e.currentTarget.id);
alert("清晰网1111");
}
//没有阻止冒泡
function kixi_alert1(e){
alert(e.target.id);
alert("清晰网2222");
}
//阻止冒泡
function kixi_alert2(e){
event.stopPropagation();
alert("清晰网33333");
}
k1.addEventListener("click",kixi_alert,false);
k2.addEventListener("click",kixi_alert1,false);
k3.addEventListener("click",kixi_alert2,false);