事件委托

概述

事件委托是对“事件处理程序过多”问题的解决方案。

原理

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

代码

<ul id="myLinks">
	<li id="goSomewhere">Go somewhere</li>
	<li id="doSomething">Do something</li>
	<li id="sayHi">Say hi</li>
</ul>

let list = document.getElementById('myLinks');

EventUtil.addHandler(list, 'click', function(event) {
   event = EventUtil.getEvent(event);
   let target = EventUtil.getTarget(event);

   switch(target.id) {
      case 'doSomething':
         document.title = 'I changed the document"s title';
         break;

      case 'goSomewhere':
         location.href = 'http://www.wrox.com';
         break;

      case 'sayHi':
         alert('hi');
         break;
   }
})

EventUtil请参考【事件处理程序】这篇博客

在这段代码里，我们使用事件委托只为<ul>元素添加了一个onclick事件处理程序。由于所有列表项都是这个元素的子节点，而且它们的事件会冒泡，所以单击事件最终会被这个函数处理。