事件委托: 給父元素綁定事件，用來監聽子元素的冒泡事件，并找到是哪個子元素的事件。
一個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
