使用两个事件侦听器的问题，其中第二个事件侦听器在第一个事件侦听器启动后启动答案

【问题标题】：Problem using two event listeners where second event listener starts after the first event listener is started使用两个事件侦听器的问题，其中第二个事件侦听器在第一个事件侦听器启动后启动
【发布时间】：2020-11-29 08:32:28
【问题描述】：

我正在尝试使用一个事件侦听器，该侦听器仅在启动其他事件侦听器后才起作用，但是当我按照我的代码中给出的那样执行时它不起作用，但是当我使用单个事件侦听器时代码起作用。

代码：

function changeColor(){
            let slab=document.querySelector('.container');
            slab.addEventListener('onclick',function activateOnMouseClick(){
                let slab=document.querySelectorAll('div .item');
                slab.forEach((slabs)=>
                    slabs.addEventListener('mouseover',function changeGridColor(){
                        slabs.setAttribute('style','background: blue; font-size:30px; text-align: center; border:0px solid white');
                }));
            });
        }

这段代码应该做的是，当我点击一个项目时，它应该激活 mouseover 事件侦听器，然后更改该项目的颜色。

live（仅使用鼠标悬停）：[工作][1]

当您将鼠标悬停在矩形中时，瓷砖会改变颜色，但我想要的是它们只有在我第一次使用鼠标单击激活鼠标悬停时的颜色变化时才会改变颜色。 [1]：https://utsavj.github.io/etch-a-sketch/

【问题讨论】：

标签： javascript event-listener

【解决方案1】：

替换此行

slab.addEventListener('onclick',function activateOnMouseClick(){

正确的语法是click

slab.addEventListener('click', function activateOnMouseClick() {

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Etch-a-sketch</title>
    <style>
        .container {
            display: grid;
            height: 400px;
            width: 400px;
            grid-gap: 1px;
            border: 1px solid black;
        }
    </style>

</head>
<body>

    <h1>Etch-a-sketch</h1>
    <button id="reset" onclick="resetColor()">Reset</button><br>
    <button onclick="size()">Set Size</button><br>

    <div class="container">
    </div>
    <script>
        function numberOfGrids() {
            let container = document.querySelector('.container');
            for (i = 1; i <= (16 * 16); i++) {
                let item = document.createElement('div')
                item.classList.add('item');
                item.setAttribute('style', 'font-size: 30px; text-align: center; border: 0px solid white');
                container.appendChild(item);
            }
        }

        function changeColor() {
            let slab = document.querySelectorAll('div .item');
            slab.forEach((slabs) =>
                slabs.addEventListener('mouseover', function changecolor() {
                    slabs.setAttribute('style', 'background: blue; border: 0px solid white');
                }));
        }

        function changeColor() {
            let slab = document.querySelector('.container');
            slab.addEventListener('click', function activateOnMouseClick() {
                let slab = document.querySelectorAll('div .item');
                slab.forEach((slabs) =>
                    slabs.addEventListener('mouseover', function changeGridColor() {
                        slabs.setAttribute('style', 'background: blue; font-size:30px; text-align: center; border:0px solid white');
                    }));
            });
        }

        function resetColor() {
            let item = document.querySelectorAll('div .item');
            item.forEach((items) =>
                items.setAttribute('style', 'background:white; border: 0px solid white'));

        }

        function size() {
            let size = prompt("Enter the size", "");
            let container = document.querySelector('.container');
            while (container.firstChild) {
                container.removeChild(container.lastChild);
            }
            container.style.gridTemplateColumns = `repeat(${size}, auto)`;
            container.style.gridTemplateRows = `repeat(${size}, auto)`;

            for (i = 1; i <= (size * size); i++) {
                let item = document.createElement('div');
                item.classList.add('item');
                item.setAttribute('style', 'font-size: 30px; text-align: center; border: 0px solid white');
                container.appendChild(item);

            }
            changeColor();
        }

        size(16);
        //numberOfGrids();
        changeColor();
    </script>
</body>
</html>

【讨论】：