事件委托: 给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。
一个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
