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


<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>Documenttitle>
        <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>
        

用事件委托 实现点击li会把背景变红_第1张图片

你可能感兴趣的:(学习,javascript,css,html)