事件处理程序本质上是一种函数, 是一种对象, 存放在内存中, 设置大量的事件处理程序会使内存中的对象变多, Web 程序的性能会变得越来越差.

为了更好利用事件处理程序, 出现了事件委托, 用来提升性能

事件委托

Event Delegate: 把若干个子节点上的相同事件的处理函数绑定到父节点, 从父节点统一处理子节点冒泡上来的事件, 这种技术叫做事件委托.

举例:

<ul id='parent-list'>
    <li id='list-1'>List 1</li>
    <li id='list-1'>List 1</li>
    <li id='list-1'>List 1</li>
    <li id='list-1'>List 1</li>
</ul>
`</pre>

通过父节点监听冒泡事件可以处理子节点上的对应事件

<pre>`var parentList = document.getElementById('parent-list');
parentList.addEventListener('click', function(){
  var target = event.target; // li
  if(target.nodeName.toLowerCase() === 'li'){
    alert(target.firstChild.nodeValue);
  }
}, false)

因为事件委托依赖事件冒泡机制, 所以并不是所有事件都可以委托

最适合的事件: click, mousedown, mouseup, keydown, keyup, keypress

移除事件处理程序

每当将事件处理程序制定给元素时, 运行中的浏览器代码与支持页面交互的 Js 代码之间就会建立一个连接, 这种连接越多, 页面执行越慢

如果使用完后不再使用的事件处理程序, 应当释放掉

1
2
3
4
5
6
<button id = 'button'>Submit</button>
var button = document.getElementById('button');
button.onclick = function(){
  button.onclick = null;
  event.target.firstChild.nodeValue = "Submitting"
}