js属性调用者只能用this不能用数组遍历循环内的arr[i]_ul[0].children[i].addeventlistener-CSDN博客

本文链接：https://blog.csdn.net/weixin_46032763/article/details/107747929

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <body>
        <button>开关灯</button>
        <button>开关灯</button>
        <button>开关灯</button>
        <button>开关灯</button>
        <button>开关灯</button>

        <script>
            var btns = document.querySelectorAll('button');
            /* btns.onclick = function() {
                    this.style.backgroundColor = 'blue';
                } */
            for (var i = 0; i < btns.length; i++) {
                // for循环里边只能用btns[i]不能用this
                btns[i].onclick = function() {
                    //点击事件里边，事件触发对象和索引相关，以下只能用this，不能用 btns[i]
                    this.style.backgroundColor = 'pink';
                    // btns[i].style.backgroundColor = 'pink';
                }
            }
            var b = document.querySelector('button');
            b.addEventListener('click', function() {
                // 对比：点击事件里边，事件触发对象和索引无关，既能用this，也能用 btns[i]
                // b.style.backgroundColor = 'purple';
                this.style.backgroundColor = 'purple';
            });
        </script>
    </body>
</body>

</html>

对比

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        body {
            background-color: black;
        }
        
        .c-nav {
            position: relative;
            width: 900px;
            height: 42px;
            background: #fff url(images/rss.png) no-repeat right center;
            margin: 100px auto;
            border-radius: 5px;
        }
        
        .c-nav ul {
            position: absolute;
            /* background-color: green; */
        }
        
        .c-nav ul li {
            float: left;
            padding: 0 10px;
            /* line-height: 42px; */
            text-align: center;
        }
        
        .c-nav a {
            display: inline-block;
            height: 42px;
        }
        
        .c-nav a:hover {
            color: yellow;
        }
        
        .cloud {
            position: absolute;
            left: 0;
            top: 0;
            width: 83px;
            height: 42px;
            background: url(images/cloud.gif) no-repeat;
        }
    </style>
    <script src='animate.js'></script>
</head>

<body>
    <div class="c-nav">
        <!-- cloud绝对定位，如ul没有定位则cloud会压住ul,防止cloud压住ul，又由于ul li a都没有设置背景色所以三者都是透明的，想实现透明的ul压住cloud，ul也必须设置定位，两者都设置定位之后不指定z-index都同为auto，又ul晚于cloud生成，所以ul会成功压住cloud -->
        <span class="cloud"></span>
        <ul>
            <li><a href="javascript:;">首页新闻</a></li>
            <li><a href="javascript:;">师资力量</a></li>
            <li><a href="javascript:;">活动策划</a></li>
            <li><a href="javascript:;">企业文化</a></li>
            <li><a href="javascript:;">招聘信息</a></li>
            <li><a href="javascript:;">公司简介</a></li>
            <li><a href="javascript:;">我是佩奇</a></li>
            <li><a href="javascript:;">啥是佩奇</a></li>
        </ul>
    </div>
    <!-- <script src='js/animate.js'></script> -->
    <script>
        var cnav = document.querySelector('.c-nav');
        var ul = document.querySelector('ul');
        var cloud = document.querySelector('.cloud');
        var lis = document.querySelectorAll('li');
        var lifirst = document.querySelector('li');
        lifirst.addEventListener('click', function() {
            // this,lifirst都可
            lifirst.style.color = 'yellowgreen';
            this.style.color = 'yellowgreen';
        });
        for (var i = 0; i < lis.length; i++) {
            lis[i].addEventListener('mouseleave', function() {
                // ？触发事件根调用者是lis[i],所以和索引有关，以下只能用this，不能用lis[i]
                this.style.backgroundColor = 'pink';
                // lis[i].style.backgroundColor = 'pink';
            });
        }
        /* 
                for (var i = 0; i < ul.children.length; i++) {
                    ul.children[i].addEventListener('mouseenter', function() {
                        // ？触发事件根调用者ul，根调用者不带索引（this/ul.children[i]都可用），但根调用者的调用者带索引（只能用this）综上只能用this
                        animate(cloud, this.offsetLeft);
                        this.style.backgroundColor = 'purple';
                    });
                } */
    </script>
</body>

</html>