有时我们需要移除元素的事件监听，比如我们后面要学习的拖拽效果。
DOM0 级事件监听的移除很简单，直接把 onclick 属性设置为 null 即可：
oBox.onclick = null;
此时 oBox 对象就没有 onclick 事件监听了。
DOM2 级事件监听移除的时候，必须“指名道姓”去移除。也就是说，如果是匿名函数添加的事件监听，是
不可能去掉的。语法：
box.removeEventListener("click",boxClickHandler, true);
添加这个事件监听的时候要有名：
box.addEventListener("click",boxClickHandler,true);
function boxClickHandler(){
alert("你好");
}
认识事件对象
任何事件处理函数，系统都会自动向其传入一个 event 参数，封装了这次事件的一些细节，比如鼠标点击
的位置等。
例如：
<!DOCTYPE html>
<head>
<meta charset=UTF-8>
<title>Document</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var box = document.getElementById("box");
box.onclick = function(event){
console.log(event);
}
</script>
</body>
</html>
我们给 box 盒子添加了点击事件，并且输出了它的事件对象 event
可见，控制台中输出了 event 对象，它有非常多的属性，里面涵盖了这次事件的一些细节参数，比如鼠标
点击的位置等。
event.target 属性
事件处理对象 event 对象一定有一个 target 属性，它表示事件阶段的最早来源。什么意思呢？如果你监听
的是冒泡阶段，则 event.target 就是最内层元素，因为最内层元素就冒泡阶段的来源；而如果你监听捕获阶段，
则 event.target 是最外层元素，因为最外层元素就是捕获阶段的来源。
比如：
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<div id="box1">
<div id="box2">
<button id="btn">按我</button>
</div>
</div>
<script type="text/javascript">
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var btn = document.getElementById("btn");
box1.onclick = function(event){
console.log(event.target);
}
</script>
</body>
</html>
我们监听了盒子 1 冒泡阶段的点击事件（DOM0 级只能监听冒泡阶段）。网页运行时我们点击按钮，事件将
会在冒泡阶段传给 box1，它会输出 event.target 值，控制台输出按钮对象。即，这个冒泡
事件的来源是按钮，所以对于 box1 来说，event.target 就是按钮了。
