事件的委派 
 1     <script type="text/javascript">
 2             
 3             window.onload = function(){
 4                 
 5                 var u1 = document.getElementById("u1");
 6                 
 7                 //点击按钮以后添加超链接
 8                 var btn01 = document.getElementById("btn01");
 9                 btn01.onclick = function(){
10                     //创建一个li
11                     var li = document.createElement("li");
12                     li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
13                     
14                     //将li添加到ul中
15                     u1.appendChild(li);
16                 };
17                 
18                 
19                 /*
20                  * 为每一个超链接都绑定一个单击响应函数
21                  * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
22                  *     而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
23                  */
24                 //获取所有的a
25                 var allA = document.getElementsByTagName("a");
26                 //遍历
27                 /*for(var i=0 ; i<allA.length ; i++){
28                     allA[i].onclick = function(){
29                         alert("我是a的单击响应函数！！！");
30                     };
31                 }*/
32                 
33                 /*
34 
 1 <body>
 2         <button id="btn01">添加超链接</button>
 3         
 4         <ul id="u1" style="background-color: #bfa;">
 5             <li>
 6                 <p>我是p元素</p>
 7             </li>
 8             <li><a href="javascript:;" class="link">超链接一</a></li>
 9             <li><a href="javascript:;" class="link">超链接二</a></li>
10             <li><a href="javascript:;" class="link">超链接三</a></li>
11         </ul>
12         
13     </body>


 


43                 //为ul绑定一个单击响应函数
44                 u1.onclick = function(event){
45                     event = event || window.event;
46                     
47                     /*
48                      * target
49                      *     - event中的target表示的触发事件的对象
50                      */
51                     //alert(event.target);
52                     
53                     
54                     //如果触发事件的对象是我们期望的元素，则执行否则不执行
55                     if(event.target.className == "link"){
56                         alert("我是ul的单击响应函数");
57                     }
58                     
59                 };
60                 
61             };
62             
63         </script>




 






	
 posted on 
2022-04-27 15:38 
crush丶凡子 
阅读(26) 
评论(0) 
 
收藏 
举报