- 有必要限制一个页面中事件处理程序的数量,数量太多会导致大量内存,而且也会让用户更加页面反应不够灵敏。
- 建立在事件冒泡机制之上的事件委托技术,可以有效减少事件处理程序的数量。
-
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..."; });
解决方法: 手动移除