javascript - 如何为元素及其父元素分配不同的事件处理程序

Question

假设我有这样的结构:

<ul id="a">text
    <li id="b">text</li>
    <li id="c">text</li>
</ul>

如何为 a、b 和 c 分配不同的事件处理程序(例如，onclick 监听器)？当我将处理程序分配给 <ul> 时, 它会在任何 <li> 时被触发被点击。

Answer 1

与其为列表中的每个元素设置单个处理程序，不如在父级上使用单个事件监听器，并使用事件委托(delegate)检测哪个是用户单击的元素的 ID

$('ul').on('click', function(evt) {
   id = evt.target.id;
   switch (id) {
      "a" : ... break;
      "b" : ... break;
      "c" : ... break;
      default: ... ;
   }   

});