事件的委派(委托)

一、什么是事件的委派?

        事件的委派也叫事件代理,简单理解就是:原本是某个元素需要绑定的事件,现在将这个事件交给别的元素去做,正常我们把它交给父级元素,比如:原本是给li绑定点击事件,现在交给它父级ul绑定,利用冒泡原理,点击li的时候会触发ul的事件;


二、事件委派有什么好处?

        1.提升性能: 比如要给100个li安装点击事件,正常我们会用for循环去个每个li安装,这样与访问dom的次数就多了,性能也就比较低;利用冒泡原理,我们给ul安装点击事件(就是委派ul代理这个事件),点击li的事件由ul去执行,这样我们就只访问一次dom,性能就提升了;

        2.能绑定新添加标签的事件:什么意思? 比如用for给10个li绑定了事件,然后现在又添加了新的li,这样新添加的li就没有绑定到了;此时我们委派ul去绑定事件,点击新添加li也是会触发这个事件的;


三、事件委派的例子(看完例子应该更容易理解)

       <button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: #bfa;">
<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>
<script type="text/javascript">
var fu=document.getElementById("u1");
var btn=document.getElementById("btn01");

                        //由于冒泡原理,点击ul下面的标签,会触发到ul的事件,所以给ul委派点击事件

/**************************事件的委派开始**********************************/

fu.onclick=function(event){
var event=event||window.event; //解决兼容性
if(event.target.getAttribute("class")=="link") //判断点击的是不是a标签
{
alert(event.target.innerHTML); //event对象提供target属性,返回事件的目标节点
}

}

/**************************事件的委派结束**********************************/

                        //添加按钮点击事件
btn.onclick=function(){
var li=document.createElement("li");
li.innerHTML="<a href='javascript:;' class='link'>新建的超链接</a>";
fu.appendChild(li);
}

</script>


猜你喜欢

转载自blog.csdn.net/Chen_start02/article/details/80176388
今日推荐