事件委托

对“事件处理程序过多”的问题的解决方案就是事件委托。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。如下面的代码：

<ul id="list">    <li id="go">go baidu.com</li>    <li id="do">change body color</li>    <li id="pop">hello world</li></ul>

添加事件处理程序：

var item1 = document.getElementById("go");var item2 = document.getElementById("do");var item3 = document.getElementById("pop");item1.addEventListener("click", function () {    location.href = "http://www.baidu.com";});item2.addEventListener("click", function () {    document.body.style.backgroundColor = "#ccc";});item3.addEventListener("click", function () {    console.log("hello world");});

这样写会有数不清的代码用于添加事件处理程序，但如果利用事件委托技术，就可以用比较少的代码解决这个问题：

var list = document.getElementById("list");function handleEvent() {    switch (event.type) {        case "click":switch (event.target.id) {    case "go":        location.href = "http://www.baidu.com";        break;    case "do":        document.body.style.backgroundColor = "#ccc";        break;    case "pop":        console.log("hello world");        break;}break;        case "dblclick":if (event.target.id == "list") {    list.style.visibility = "hidden";};break;    }}list.addEventListener("click", handleEvent);list.addEventListener("dblclick", handleEvent);

这样就轻松加愉快的解决问题了。

另外，如果可行的话，可以考虑为document对象添加一个事件处理程序，用以处理页面上发声的某种特定的事件。

最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress。

移除事件处理程序

通常造成空事件处理程序的原因有可能是DOM操作（removeChild()等）、或使用innerHTML等。如：

var btn = document.getElementById("btn");btn.addEventListener("click", btnHandler);function btnHandler () {    switch (event.type) {        case "click":document.getElementById("myDiv").innerHTML = "Processing...";break;    }}

在div元素中设置innerHTML可以把按钮移走，但事件处理程序依然与按钮保持引用关系，所以最好设置成如下：

var btn = document.getElementById("btn");btn.addEventListener("click", btnHandler);function btnHandler () {    switch (event.type) {        case "click":// do somethingbtn.onclick = null;document.getElementById("myDiv").innerHTML = "Processing...";break;    }}

在事件处理程序中删除按钮也能阻止事件冒泡

另外，在页面卸载之前，也应该通过onunload事件处理程序移除所有事件处理程序。以防止部分浏览器出现内存问题。