jquery事件委托的一个小例子

事件委托: 给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。

一个jquery写的简单的listdemo，可以实现增加和删除list，同时还加入一下小功能，计数器counter，鼠标经过每个list显示其序列号。截取其中要讲的部分html和jquery代码，如下：

1.png

<div id="page">
      <h1 id="header">List</h1>
      <h2>SHOPPING LIST<span id="counter"></span></h2>
      <ul>
            <li id="one" class="hot"><em>fresh</em> figs</li>
            <li id="two" class="hot">pine nuts</li>
            <li id="three" class="hot">honey</li>
            <li id="four">balsamic vinegar</li>
      </ul>
      <div id="newItemButton"><button href="#" id="showForm">new item</button></div>
      <form id="newItemForm">
            <input type="text" id="itemDescription" placeholder="Add description" />
            <input type="submit" id="add" value="add" />
      </form>
</div>

$(function(){

    //鼠标放在li上显示对应的编号
    $('li').on('mouseover',function(){
          var mark = $(this).index()+1;
          $(this).append(' <span>' + mark + '</span>');
   });

    //鼠标移开li上对应的编号移除  
   $('li').on('mouseout','li',function(){
          $(this).children('span').remove();
   });

2.png

3.png

这种写法，使得原有的li元素，鼠标经过是可以显示编号的，但是新增的li元素，却不行了，不能监听动态的插入新元素了。
这个时候应该用事件委托，li元素冒泡给其父元素ul，监听到动态插入的li元素点击事件，jquery代码如下：

$(function(){

//鼠标放在li上显示对应的编号
    $('ul').on('mouseover','li',function(){
        var mark = $(this).index()+1;
        $(this).append(' <span>' + mark + '</span>');
   });

    //鼠标移开li上对应的编号移除  
   $('ul').on('mouseout','li',function(){
        $(this).children('span').remove();
   });

}

4.png