用事件委托实现点击li会把背景变红

最新推荐文章于 2024-06-10 17:00:16 发布

OrdnAry

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量732

点赞数

分类专栏：学习文章标签： javascript css html

本文链接：https://blog.csdn.net/ordnary/article/details/108262734

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>Document</title>
        <script>
            /* 
                委托：
                    A委托B去买饭。
                    A发布任务  委托方
                    B执行任务  代理方
            */
           /* 
                事件委托实现步骤：
                    1、找到当前节点的父节点或者祖先节点
                    2、将事件添加到你找到的这个父节点或者祖先节点上
                    3、找到触发对象，判断触发对象是否是想要的触发对象，进行后续的操作
                
                li委托ul将li变成红色

                    1、浪费
                    2、后添加的li节点没有点击事件
                【注】事件委托的原理是事件冒泡。
           */
            window.onload = function(){
                var oUl = document.getElementById("ul1");
                oUl.onclick = function(ev){
                    var e = ev || window.event;
                    var target = e.target || window.event.srcElement;
                    if(target.nodeName.toLowerCase() == "li"){
                        target.style.backgroundColor = 'red';
                    }
                }
                var obtn = document.getElementById("btn1");
                var i = 6;
                obtn.onclick = function(){
                    var newNode = document.createElement("li");
                    newNode.innerHTML = i++ * 1111;
                    oUl.appendChild(newNode);
                }
            }
        </script>
    </head>
    <body>
        <button id = 'btn1'>新增节点</button>
        <ul id = 'ul1'>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
            <li>5555</li>
        </ul>
    </body>
</html>

在这里插入图片描述

OrdnAry

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用事件委托实现点击li会把背景变红

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
复制链接

扫一扫