032 事件的委派

<ul id="u1">
   <li><a href="javascript: ;">超链接一</a></li>
   <li><a href="javascript: ;">超链接二</a></li>
   <li><a href="javascript: ;">超链接三</a></li>
  </ul>
  <button id="btn01">添加超链接</button>

<script type="text/javascript">
   window.οnlοad=function(){
    var u1=document.getElementById("u1");
    //点击按钮以后添加超链接
    var btn01=document.getElementById("btn01");
    btn01.οnclick=function(){
     //创建一个li
     var li=document.createElement("li");
     li.innerHTML="<a href='javascript:;'class='link'>新建的超链接</a>";
     //将li添加到u1中
     u1.appendChild(li);
    }
    /*
    *为每一个超链接都绑定-个单击响应函数
    *这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
    而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
    */
    //获取所有的a
    /* var allA=document.getElementsByTagName("a");
    //遍历
    for(var i=0;i<allA.length;i++){
     allA[i].οnclick=function(){
      alert("我是a的单击响应函数!!!");
     };
    } */
    
    /*我们可以尝试将其绑定给元素的共同的祖先元素
    *
    *事件的委派
    *指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
    *从而通过祖先元素的响应函数来处理事件。
    *事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
    */
    //为u1绑定-一个单击响应函数
	u1.onclick = function(event){
		//alert(“我是u1的单击响应函数");
		event = event| |window. event;
		/*
		* target
		一event中的target表示的触发 事件的对象
		*/
		alert(event. target);//javascript:;
		//如果触发事件的对象是我们期望的元素，则执行否则不执行
		if(event. target. className == "link" ){
			alert (“我是u1的单击响应函数") ;
		};
};
</script>