js基础_71、事件的委派

事件的委派

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

target

event(事件对象)中的target表示的是触发事件的元素

在body中编写如下代码：

<button id="btn1">添加超链接</button>
<ul id="u1">
<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>

在js中编写如下代码：
为每一个超链接都绑定一个单击响应函数， 我们希望只绑定一次事件，即可应用到多个元素上，即使元素是后添加的， 我们可以尝试将其绑定元素的共同祖先元素，如果触发事件的对象是我们期待的元素，则执行，否则不执行。

window.onload=function(){
                /*
                 * 为每一个超链接都绑定一个单击响应函数，
                 * 我们希望只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，
                 * 我们可以尝试将其绑定元素的共同祖先元素
                 */
                var btn1=document.getElementById("btn1");
                var u1=document.getElementById("u1");
                u1.onclick=function(event) {
                    //如果触发事件的对象是我们期待的元素，则执行，否则不执行。
                    var mclass=event.target.className;
                    if(mclass=="link"){
                        alert("我是单击响应函数");
                    }
                };
                btn1.onclick=function(){
                    var li=document.createElement("li");
                    li.innerHTML="<li><a href='javascript:;' class='link'>新建的超链接</a></li>";
                    u1.appendChild(li);
                };
};