<!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>