事件的委派
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript"> 8 9 window.onload=function() 10 { 11 //点击按钮以后添加超链接 12 var button1=document.getElementById("button1"); 13 var ul=document.getElementById("ul"); 14 15 button1.onclick=function(){ 16 var li=document.createElement("li"); 17 li.innerHTML="<a href='javascricpt:;' class='link'>超链接</a>"; 18 ul.appendChild(li); 19 }; 20 21 /* 22 为每一个超链接都绑定一个单击响应函数 23 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦， 24 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定 25 26 var allA=document.getElementsByTagName("a"); 27 for(var i=0;i<allA;i++){ 28 allA[i].onclick=function(){ 29 30 }; 31 } 32 我们希望只绑定一次事件，即可应用到多个元素上，即使元素后添加的 33 我们可以尝试将其绑定给元素的共同的祖先元素 34 35 为ul绑定一个单击绑定函数 36 事件的委派 37 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时， 38 会一直冒泡到祖先元素 39 从而通过祖先元素的响应函数来处理事件，通过委派可以减少事件绑定的次数，提高程序的性能 40 事件的委派是利用了冒泡 41 */ 42 ul.onclick=function(){ 43 /* 44 如果触发事件的对象是我们期望的元素，则执行否则不执行 45 event中的target表示的触发事件的对象 46 */ 47 if(event.target.className=="link") 48 alert("hi"); 49 }; 50 51 }; 52 53 </script> 54 <style type="text/css"> 55 #ul{ 56 background-color:#bfa; 57 } 58 #span{ 59 background-color:yellow; 60 } 61 62 </style> 63 <body> 64 <button id="button1">添加超链接</button> 65 <ul id="ul"> 66 67 <li> 68 <a href="javascricpt:;"class="link">超链接</a> 69 </li> 70 <li> 71 <a href="javascricpt:;"class="link">超链接</a> 72 </li> 73 <li> 74 <a href="javascricpt:;"class="link">超链接</a> 75 </li> 76 </ul> 77 </body> 78 </html>
