位置:首页 > 软件操作教程 > 编程开发 > JavaScript > 问题详情

JavaScript 委托事件

提问人:刘团圆发布时间:2020-11-27

■知识点

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

会占用更多内存。

继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部