jquery事件委托的一个小例子

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

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

1.png

      
List
      
SHOPPING LIST
      

            
fresh figs
            
pine nuts
            
honey
            
balsamic vinegar
      
      
new item
      

            
            
      

$(function(){

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

    //鼠标移开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(' ' + mark + '');
   });

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

}

4.png