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)事件中时，对任何一个交互网页来说，这都是一个繁忙的时间段。另外，浏览器需要保存每个事件句柄的记录，也

会占用更多内存。