一、 event对象中的target,currentTarget的区别
在使用event对象时,event对象有两个属性target和currentTarget,这两属性都代表事件源,由于事件冒泡和捕获(如果想知道事件冒泡和事件捕获请点击)的原因,会出现直接的事件源(发生事件的DOM元素)和当前事件源(经过冒泡或者捕获后,触发的父级对应事件的事件源)。
1)、target:而直接的事件源(真正的事件源)是target。
2)、currentTarget:经过冒泡或者捕获触发的父级的DOM元素是currentTarget。冒泡到哪个父元素,那么currentTarget就是哪个父元素。
3)、this:在事件处理函数中,this就是currentTarget。
以下代码经过运行,在谷歌浏览器中的控制台就可以打印的内容,根据打印的内容就知道target和currentTarget分别是谁了?
看看如下示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#grandpaDiv{
width:400px;
height:400px;
background-color:red;
}
#fatherDiv{
width:300px;
height:300px;
background-color:yellow;
}
#meDiv{
width:200px;
height:200px;
background-color:pink;
}
</style>
</head>
<body>
<div id="grandpaDiv">
<div id="fatherDiv">
<div id="meDiv">
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
//target:真正的事件源,不会因为冒泡或者捕获而改变
//currentTarget:当前事件源,冒泡冒到(捕获捕到)哪个元素,就是哪个元素
window.onload = function(){
$("grandpaDiv").addEventListener("click",function(event){
var evt = event || window.event;
console.log("爷爷被点了");
console.log("currentTarget:",evt.currentTarget);
console.log("target:",evt.target);
},false);
$("fatherDiv").addEventListener("click",function(event){
var evt = event || window.event;
console.log("爸爸被点了");
console.log("currentTarget:",evt.currentTarget);
console.log("target:",evt.target);
},false);
$("meDiv").addEventListener("click",function(event){
var evt = event || window.event;
console.log("我被点了");
console.log("currentTarget:",evt.currentTarget);
console.log("target:",evt.target);
},false);
}
</script>
二、应用_事件委托
事件委托:把本该属于某个DOM对象的事件,委托给它的父(级)元素。这样做的好处是:对于动态添加的元素,事件依然会有效。
如:在<ul>标签下有若干个<li>标签,如果希望给每个<li>标签增加一个onclick事件,而且希望,动态添加<li>元素后,新添加的<li>标签依然有onclick事件,就可以使用事件委托。
事件委托中需要使用到event对象的target属性。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style:none;
position:absolute;
left:100px;
top:100px;
width:200px;
border:1px solid black;
}
</style>
</head>
<body>
<ul id="menuBox">
<li>收藏本网站</li>
<li>qq聊天</li>
<li>微信聊天</li>
<li>网页聊天</li>
</ul>
<input id="btnAdd" type="button" value="添加一个li" />
</body>
</html>
<script type="text/javascript" src="js/eventTools.js"></script>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
//事件委托:
//把本该属于某个DOM对象的事件,委托给它的父(级)元素。
window.onload = function(){
//使用事件委托,把本该属于li的onclick事件,委托它的父元素ul
//使用事件冒泡的特性,点击子元素,就会触发父元素的点击事件。
$("menuBox").onclick = function(event){
var evt = event || window.event;
if(evt.target.tagName.toLowerCase()=="li"){//只针对li元素进行处理
alert(evt.target.innerHTML);
}
}
//以下为动态添加li标签
var ord = 4;
$("btnAdd").onclick = function(){
ord++;
var liObj = document.createElement("li");
liObj.innerHTML = "第"+ord+"个li";
$("menuBox").appendChild(liObj);
}
}
</script>