<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>传统注册事件</button>
<button>监听注册事件</button>
<script>
var bts = document.querySelectorAll('button');
// 传统注册事件 具有唯一性 只能注册一个事件 （都兼容）
bts[0].onclick = function () {
alert(11) //此事件 被后面的覆盖 不执行
};
bts[0].onclick = function () {
alert(22); // 此事件执行
bts[0].onclick = null; // 这里移除事件
};
// 监听注册事件 可以注册多个事件 （IE9向上兼容）
// bts[1].addEventListener('click',function () {
// alert(33) // 执行
// });
// bts[1].addEventListener('click',function () {
// alert(44) // 执行
// })
// 为了移除事件 这里应写成这样
bts[1].addEventListener('click', f);
function f() {
alert(33);
bts[1].removeEventListener('click', f); // 这里移除事件
}
</script>
</body>
</html>
