JS事件之内存与性能

有必要限制一个页面中事件处理程序的数量，数量太多会导致大量内存，而且也会让用户更加页面反应不够灵敏。
建立在事件冒泡机制之上的事件委托技术，可以有效减少事件处理程序的数量。

 1 <div id="box">
 2         <input type="button" id="add" value="添加" />
 3         <input type="button" id="remove" value="删除" />
 4         <input type="button" id="move" value="移动" />
 5         <input type="button" id="select" value="选择" />
 6     </div>
 7 <script>
 8     window.onload = function(){
 9             var Add = document.getElementById("add");
10             var Remove = document.getElementById("remove");
11             var Move = document.getElementById("move");
12             var Select = document.getElementById("select");
13             
14             Add.onclick = function(){
15                 alert('添加');
16             };
17             Remove.onclick = function(){
18                 alert('删除');
19             };
20             Move.onclick = function(){
21                 alert('移动');
22             };
23             Select.onclick = function(){
24                 alert('选择');
25             }
26             
27         }
28 </script>

核心：利用冒泡原理，将事件绑定到父元素，减少内存消耗，提升性能；利用event属性找到事件源，将事件定位到具体元素上。

建议在浏览器卸载页面之前移除页面中的所有事件处理程序。

var btn=document.getElementById("btn");
EventUtil.addHandler(btn,"click",function(){
　　btn.onclick=null;                                      
　　document.getElementById("div").innerHTML="processing...";
});

　　解决方法：手动移除

JS事件 之内存与性能

JS事件之内存与性能