什么是事件委托？jquery和js怎么去实现？

最新推荐文章于 2025-08-08 00:04:04 发布

weixin_30375427

最新推荐文章于 2025-08-08 00:04:04 发布

阅读量176

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tangdiying/p/10520723.html

本文深入讲解了事件委托（事件代理）的概念，通过JS和jQuery代码示例，展示了如何利用事件冒泡原理，仅用一个事件处理器来管理同一类型的所有事件，有效减少事件监听器的设置，提高网页性能。

事件委托又叫事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

js：

window.onload = function(){
    var oul = document.getElementById("ul1");
    oul.onclick = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase()=="li"){
            console.log(target.innerHTML);
        }
    }
}

jquery:

$(function(){
    $("#lists").on("click","li",function(event){
        var target = $(event.target);
        target.css("background","red");
    })
})

转载于:https://www.cnblogs.com/tangdiying/p/10520723.html