JavaScript 委托事件
■知识点
事件委托(delegate)也称为事件托管或事件代理,简单描述就是把目标节点的事件绑定到祖先节点上。这种简单而优雅的事件注册方式基于:事件传播过程中,逐层冒泡总能被祖先节点捕获。
这样做的好处:优化代码,提升运行性能,真正把HTML和JavaScript分离,也能防止在动态添加或删除节点过程中,注册的事件丢失现象。
■实例设计
下面的示例借助事件委托技巧,利用事件传播机制,在列表框ill元素上绑定click事件,当事件传播到父节点ul上时,捕获click事件,然后在事件监听函数中检测当前事件响应节点类型,如果是li元素,则进一步执行下面的代码,否则跳出事件监听函数,结束响应。
<button id="btn">添加列表项目</button>
<ul id="list">
<li>列表项目l</li>
<li>列表项目2</li>
<li>列表项目3</li>
</ul>
<script>
var ul=document.getElementByld("list");
ul.addEventListener('click',function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(e.target&&e.target.nodeName.toUpperCase() =="LI"){ //判断目标事件是否为li alert(e.target.innerHTML);
}
},false);
var i = 4;
var btn=document.getElementByld("btn");
btn.addEventListener("click",function(){
var li = document.createElement("li");
li. innerHTML ="列表项目"+ i++;
ul.appendChild(li);
});
</script〉
当页面存在大量元素,并且每个元素注册了一个或多个事件时,可能会影响性能。访问和修改更多的DOM节点,程序就会更慢,特别是事件连接过程都发生在load (或DOMContentReady)事件中时,对任何一个交互网页来说,这都是一个繁忙的时间段。另外,浏览器需要保存每个事件句柄的记录,也
会占用更多内存。
点击加载更多评论>>