<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: black;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
}
.box3 {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
<script type="text/javascript">
//案例中点击box3时：分别会出现以下情况
// 使用target会弹出三次box3
// 使用this会弹出box3 box2 box1(冒泡)
window.onload = function () {
var box1 = document.getElementsByClassName("box1")[0];
var box2 = document.getElementsByClassName("box2")[0];
var box3 = document.getElementsByClassName("box3")[0];
box1.onclick = function (event) {
event = event || window.event; //估计是兼容性写法
alert(event.target.className); //event.target指向的是被触发事件（被点击）的对象
// alert(this.className); //this指向的是事件绑定的对象
}
box2.onclick = function (event) {
event = event || window.event;
alert(event.target.className);
// alert(this.className);
}
box3.onclick = function (event) {
event = event || window.event;
alert(event.target.className);
// alert(this.className);
}
}
// 运行这个DEMO，在事件冒泡的背景下，点击box3，event.target.className为box3，之后冒泡的事件弹出的信息也为box3；
// 这是因为event.target指向的是被触发事件（被点击）的对象（box3），仅通过box3触发了一次事件（点击），所以只弹出一次box3；
// 而this.name则依次弹出的为box3，box3，box1，这是因为this指向的是事件绑定的对象，事件冒泡中连续触发了三次事件，这三次事件绑定的对象都不同。
// 简单的说就是，你点击了box3，那么e.target就是box3；并且由于你点击了box3，通过点击box3冒泡触发了box1，box2，
// 在box1和box2的事件中，e.target也是box3。但是this是谁，就和由谁触发了事件无关了。比如，无论是box2，还是box3触发了box1的事件，还是box1的事件根本没有被触发，box1的事件的this永远都是box1，忠心耿耿
// ========================总结==========================
// 1.this是Javascript语言的一个关键字。
// 2.this代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
// 3.event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
// 4.this和event.target的区别：
// js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化（在事件触发时，只传递当前event对象的引用），它永远是直接接受事件的目标DOM元素；
// 另外，this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target);
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
</body>
</html>