标签：
---
title: 提升性能——事件委托技术
date: 2016-05-11 22:13:43
tags: [javascript,improving performance, font-end]
---
(整理摘选自《Javascript高级程序设计》)
概述
利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
实际例子
HTML部分
<ul id = "mylinks">
<li id = "goSomewhere">Go somewhere</li>
<li id = "doSomewhere">Do somewhere</li>
<li id = "sayHi">Say hi</li>
</ul>
JS部分（暂不考虑兼容性）
1 var list = document.getElementById("myLinks"); 2 3 list.addEventListener("click", function (event) { 4 var target = event.target; 5 switch(target.id){ 6 case "doSomething": 7 document.title = "I changed the document‘s title"; 8 break; 9 case "goSomewhere": 10 location.href = "http://www.wrox.com"; 11 break; 12 case "sayHi": 13 alert("hi"); 14 break; 15 } 16 },false); 17
通过对ul添加onclick事件处理程序，用switch锁定target的id，就可以分别为每一个需要click事件的单项设置事件
优点
1. document对象很快就可以访问，可以在页面生命周期的任何时点上为它添加事件处理程序
2. 在页面中设置事件处理程序所需的时间更少
3. 整个页面占用的内存空间更少
各种事件的相性
适合：click,mousedown,mouseup,keydown,keyup,keypress
不适合：mouseover,mouseout
标签：
原文地址：http://www.cnblogs.com/hoten/p/5483893.html
