<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
li{
border: 1px solid #ccc;
}
div{
border: 1px solid green;
}
</style>
</head>
<body>
<ul name='grandfather'>
1
<li name='father'>
1-1
<div name='son'>
1-1-1
<div>1-1-1-1</div>
<div>1-1-1-2</div>
</div>
<div name='son'>
1-1-2
<div>1-1-2-1</div>
<div>1-1-2-2</div>
</div>
<div name='son'>
1-1-3
<div> 1-1-3-1</div>
<div> 1-1-3-2</div>
</div>
</li>
<li>
1-2
<div>1-2-1</div>
<div>1-2-2</div>
</li>
<li>
1-3
<div> 1-3-1</div>
<div> 1-3-2</div>
</li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
$('ul').on('click','li',function(event){
//event.stopPropagation();
console.log('this是'+$(this).attr('name'))
console.log('$this的儿子的name是'+$(this).children().attr('name'))
$(this).children().css('color','red');
});
</script>
</body>
</html>
上面例子说明：
·e.target是点击的目标元素；
·this是指向事件所绑定的元素（这里是li,click后面那个）；
有人说，this也是指向点击的目标元素，只是因为冒泡而最终指向事件所绑定的元素。但当上述代码中加入event.stopPropagation()后，冒泡被阻止，this与e.target效果并不一样，
所以this并不是指向点击的目标元素，而是直接指向事件所绑定的元素。
下面例子，通过有无阻止冒泡加强说明：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>e.target</title>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="temp"></div>
<ul class="JQ-content-box" style="padding:20px; background:#FFFFFF" name="祖先1">
祖先1
<li name="祖先2">
祖先2
<ul name="祖先3">
祖先3
<li name="这是公告标题1">这是公告标题1</li>
<li name="这是公告标题2">这是公告标题2</li>
<li name="这是公告标题3">这是公告标题3</li>
<li name="这是公告标题4">这是公告标题4</li>
</ul>
</li>
</ul>
<script>
$(function(){
$("ul").on("click",function(e){
//e.stopPropagation();
console.log('e.target为：'+$(e.target).attr('name'));
console.log('this为：'+$(this).attr('name'));
$("#temp").html("clicked: " + e.target.nodeName);
$(e.target).css("color","#FF3300");
})
});
</script>
</body>
</html>