onclick: onclick 添加事件不能绑定多个事件，后面绑定的会覆盖前面的。
执行以下代码，点击按钮弹出“onclick3”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<div>
<button type="button">点我</button>
</div>
<script>
window.onload = function() {
var btn = document.getElementsByTagName("button")[0];
// onclick 添加事件不能绑定多个事件，后面绑定的会覆盖前面的。
btn.onclick = function() {
alert("onclick1");
}
btn.onclick = function() {
alert("onclick2");
}
btn.onclick = function() {
alert("onclick3");
}
}
</script>
</body>
</html>addEventListener: 可以先后运行, 不会被覆盖, 它允许给一个事件注册多个监听器，按顺序执行。
执行以下代码，点击按钮，依次弹出“addEventListener1”、“addEventListener2”、“addEventListener3”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<div>
<button type="button">点我</button>
</div>
<script>
window.onload = function() {
var btn = document.getElementsByTagName("button")[0];
// addEventListener可以先后运行, 不会被覆盖, 它允许给一个事件注册多个监听器，按顺序执行
btn.addEventListener("click", function() {
alert("addEventListener1")
})
btn.addEventListener("click", function() {
alert("addEventListener2")
})
btn.addEventListener("click", function() {
alert("addEventListener3")
})
}
</script>
</body>
</html>使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
