JavaScript事件委托------JavaScript学习之路7

最新推荐文章于 2022-11-13 16:56:45 发布

dragoned_123

最新推荐文章于 2022-11-13 16:56:45 发布

阅读量180

点赞数 1

分类专栏： JavaScript 文章标签： javascript js html5 css

本文链接：https://blog.csdn.net/dragoned_123/article/details/107391675

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

JavaScript事件委托

介绍

当我们为每个标签添加点击事件的时候：

for(var i = 0;i<lss.length;i++){
    lss[i].onclick = function(){
        lss[i].style.color = "red";//添加点击事件使得文字的颜色为红色
    }
}

此时的每一个标签相当于有自己的一个点击事件函数，这样大大浪费了资源，没有共享，而且当在for循环结束后再添加新的标签，这些标签不会有颜色变红的效果。

在这里插入图片描述

所以事件委托就相当于每一个标签的点击事件通过触发父节点的事件来进行触发对象的判断来呈现效果，委托方是每一个标签，处理方是父节点。

实现步骤

找到触发节点的父节点
```
var u = document.getElementById("u1");
```

绑定事件到此节点的父节点

u.onclick = function (ev) {
    var e = ev || window.event;
    var target = e.target || window.event.srcElement;//获取触发对象
    if(target.nodeName.toLowerCase() == "li"){
        target.style.color = "red";
    }
}

找到触发对象，判断触发对象是否是想要的触发对象，进行触发的操作

if(target.nodeName.toLowerCase() == "li"){//判断触发对象
    target.style.color = "red";
}

案例

按照演示使用事件委托模型在后续添加的节点上实现同样的效果

在这里插入图片描述

完整源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            text-decoration: none;
            font-size: 16px;
            text-align: center;
        }
        body{
            margin-top: 100px;
        }
    </style>
</head>
<body>
<button id="b1">添加标签</button>
<ul id="u1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    var i=0;
    var u = document.getElementById("u1");
    var lss = u.getElementsByTagName("li");
    //无事件委托
    // for(;i<lss.length;i++) {
    //     lss[i].onclick = function () {
    //         this.style.color = "red";
    //     }
    // }
    i=5;
    //事件委托
    u.onclick = function (ev) {//绑定事件到父节点
        var e = ev || window.event;
        var target = e.target || window.event.srcElement;//获取触发对象
        if(target.nodeName.toLowerCase() == "li"){//判断事件对象
            target.style.color = "red";
        }
    }
    var bt = document.getElementById("b1");
    bt.onclick = function () {
        i++;
        var li = document.createElement("li");//创建新的节点
        li.innerText = i;
        u.appendChild(li);
    }
</script>
</body>
</html>

dragoned_123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件委托------JavaScript学习之路7

JavaScript事件委托介绍当我们为每个标签添加点击事件的时候：for(var i = 0;i<lss.length;i++){ lss[i].onclick = function(){ lss[i].style.color = "red";//添加点击事件使得文字的颜色为红色 }}此时的每一个标签相当于有自己的一个点击事件函数，这样大大浪费了资源，没有共享，而且当在for循环结束后再添加新的标签，这些标签不会有颜色变红的效果。所以事件委托就相当于每
复制链接

扫一扫

专栏目录