js事件委派_js的事件委派-CSDN博客

本文链接：https://blog.csdn.net/xxhsym/article/details/104595494

事件委派：
指将事件统一绑定给元素的共同的祖先元素，
这样当后代元素上的事件触发时，会一直冒泡到祖先元素。
事件的委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。


<script type="text/javascript">
window.onload=function(){
var ul=document.getElementById("ul");
var btn=document.getElementById("btn");
btn.onclick=function(){
var li=document.createElement("li");
li.innerHTML="<a href='javascript:;' class='link'>新建超链接</a>";
ul.appendChild(li);
}
/*
为每一个超链接绑定一个单击响应函数
事件委派：
指将事件统一绑定给元素的共同的祖先元素，
这样当后代元素上的事件触发时，会一直冒泡到祖先元素。
事件的委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
*/
ul.onclick=function(event){
event=event||window.event;
/*
target
event中的target表示的触发事件的对象
如果触发事件的对象是我们期望的元素则执行否则不执行
*/
if(event.target.className=="link"){
alert("我是a的单击响应函数"); 
} 
}

}
</script>



  <body>
  <button id="btn">添加超链接</button>
    <ul id="ul">
    <li><a href="javascript:;" class="link">超链接一</a></li>
    <li><a href="javascript:;" class="link">超链接二</a></li>
    <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>
  </body>