事件代理

动态列表添加事件，要用到事件代理。

<pre style="margin-top: 0px; margin-bottom: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; line-height: 18px; font-family: 'Courier New' !important;"><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);"><</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(128, 0, 0);">ul </span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(255, 0, 0);">id</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">="ul"</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">></span>
    <span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);"><</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(128, 0, 0);">li</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">></span>111<span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);"></</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(128, 0, 0);">li</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">></span>
    <span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);"><</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(128, 0, 0);">li</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">></span>222<span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);"></</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(128, 0, 0);">li</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">></span>
    <span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);"><</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(128, 0, 0);">li</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">></span>333<span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);"></</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(128, 0, 0);">li</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">></span>
    <span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);"><</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(128, 0, 0);">li</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">></span>444<span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);"></</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(128, 0, 0);">li</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">></span>
<span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);"></</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(128, 0, 0);">ul</span><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">></span>

Jquery

<pre class="code" style="margin-top: 0px; margin-bottom: 0px; padding: 5px 10px; word-wrap: break-word; border: 1px solid rgb(204, 204, 204); border-radius: 2px; word-break: break-word; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$( "#ul" ).delegate( "click","li", function() {});

<pre class="code" style="margin-top: 0px; margin-bottom: 0px; padding: 5px 10px; word-wrap: break-word; border: 1px solid rgb(204, 204, 204); border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; border-radius: 2px; word-break: break-word; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><pre style="margin: 0px; padding: 0px; word-wrap: break-word;">window.onload = function(){<br style="margin: 0px; padding: 0px;" />　　var oUl = document.getElementById("ul1");<br style="margin: 0px; padding: 0px;" />　　oUl.onclick = function(ev){<br style="margin: 0px; padding: 0px;" />　　　　var ev = ev || window.event;<br style="margin: 0px; padding: 0px;" />　　　　var target = ev.target || ev.srcElement;<br style="margin: 0px; padding: 0px;" />　　　　if(target.nodeName.toLowerCase() == 'li'){<br style="margin: 0px; padding: 0px;" />　 　　　　　　	...<br style="margin: 0px; padding: 0px;" />　　　　}<br style="margin: 0px; padding: 0px;" />　　}<br style="margin: 0px; padding: 0px;" />}<code><span style="color: rgb(20, 25, 30); font-family: 'Courier New' !important; font-size: 13px; line-height: 1.5; white-space: pre-wrap; margin: 0px; padding: 0px; background-color: rgb(238, 238, 238);"></span></code>