事件委托思想

Ang321

已于 2022-08-25 15:12:35 修改

阅读量162

点赞数

文章标签： javascript 前端

于 2022-04-23 19:58:19 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49847397/article/details/124367784

版权

本文介绍了JavaScript中的事件委托机制，通过示例展示了如何利用事件冒泡原理将事件处理函数委托给父元素，以实现对子元素（如LI和P标签）的操作，如改变背景颜色。这种方法可以提高代码效率并减少内存占用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将当前共同的事件委托给它们共同的父级，事件委托的的本质是事件冒泡

var ul = document.getElementByTagName("ul")[0];
ul.onclick = function(ev){
    //对事件对象兼容处理
    ev = ev || window.event;
    //对事件源兼容处理
    var target = ev.target || ev.srcElement;

    //判断li
    if(target.nodeNone == "LI"){
    target.style.backgroundColor = "blue";
    }
    if(target.nodeName == "P"){
    target.style.backgroundColor = "green";    
    }
}