Javascript 如何将一个事件侦听器应用于另一个事件侦听器？

我试图得到这样的效果，即img背景色在初始时是白色的，当它悬停时，它应该是红色的。但是当它被点击时，应该执行一个功能，并且img背景颜色应该保持为红色。但是，当再次单击img时，样式应该与初始样式类似，鼠标悬停时，img背景色为红色，反之，则为白色

希望你能明白，这是我的代码：

<script type="text/javascript">            
        document.addEventListener('DOMContentLoaded', function() {

            var img = document.getElementById('search'),
                search = document.getElementById('searchEngine');

            search.className = 'invisible';

            img.addEventListener('mouseover', makeRed);
            function makeRed(event) {
                img.style.backgroundColor = "red";
            }

            img.addEventListener('mouseout', makeWhite);
            function makeWhite(event) {
                img.style.backgroundColor = "white";
            }

            img.addEventListener('click', displaySearchField);

            function displaySearchField(event) {
                if (search.className == 'invisible') {

                    search.className = 'visible';

                    img.style.backgroundColor = "red";

                } else {
                    search.className = 'invisible';
                    makeWhite();

                }
            }
        });
    </script>

---

在这最后一刻，有人能帮我一把吗，我仍然没有得到想要的效果…

你可以通过使用CSS大大简化这一点，在CSS中你有一个类（比如说“初始”）和一个单独的类（我们称之为“点击”）。您可以使用Javascript（jQuery非常适合）将类设置为clicked或initial，并使用CSS自动将背景设置为白色，将悬停颜色设置为红色。这比在JavaScript中执行要快得多，而且CPU占用也更少。像这样使用CSS来管理你的颜色在浏览器中也更普遍地兼容

使用CSS可以大大简化这一过程，在CSS中有一个类（比如说“initial”）和一个单独的类（比如说“clicked”）。您可以使用Javascript（jQuery非常适合）将类设置为clicked或initial，并使用CSS自动将背景设置为白色，将悬停颜色设置为红色。这比在JavaScript中执行要快得多，而且CPU占用也更少。像这样使用CSS来管理你的颜色在浏览器中也更普遍地兼容

正如Bob所说，您可以使用CSS

：hover

伪类来执行悬停部分，并使用脚本在单击时切换背景

我已经包含了一些助手函数，但其中大部分可以使用直接在DOM元素上完成

使用类列表API：

.blah{背景色：蓝色；}
img{背景色：红色；}
img:hover{背景色：蓝色；}

---

正如Bob所说，您可以使用CSS

：hover

伪类来完成悬停部分，并使用脚本在单击时切换背景

我已经包含了一些助手函数，但其中大部分可以使用直接在DOM元素上完成

使用类列表API：

.blah{背景色：蓝色；}
img{背景色：红色；}
img:hover{背景色：蓝色；}

---

谢谢鲍勃·迪尔，你的想法奏效了：

document.addEventListener('DOMContentLoaded', function() {

var img = document.getElementById('search'),
    search = document.getElementById('searchEngine'),
    clicked = false;

img.className = 'hover';
search.className = 'invisible';

img.addEventListener('click', displaySearchField);

function displaySearchField(event) {
    if (clicked == false) {
        clicked = true;
        img.className = 'nohover';
        search.className = 'visible';            
    } else {
        clicked = false;
        img.className = 'hover';

        search.className = 'invisible';

    }
}

});

---

谢谢鲍勃·迪尔，你的想法奏效了：

document.addEventListener('DOMContentLoaded', function() {

var img = document.getElementById('search'),
    search = document.getElementById('searchEngine'),
    clicked = false;

img.className = 'hover';
search.className = 'invisible';

img.addEventListener('click', displaySearchField);

function displaySearchField(event) {
    if (clicked == false) {
        clicked = true;
        img.className = 'nohover';
        search.className = 'visible';            
    } else {
        clicked = false;
        img.className = 'hover';

        search.className = 'invisible';

    }
}

});

---

它是红色的。。。当你离开时，它正在变白。。。就像你编写代码一样；）将属性或变量设置为类似“clicked”的状态，并在makeWhite（）函数中检查状态是否已设置。是否只希望使用Javascript执行此操作？有更好的选择，我想它是红色的。。。当你离开时，它正在变白。。。就像你编写代码一样；）将属性或变量设置为类似“clicked”的状态，并在makeWhite（）函数中检查状态是否已设置。是否只希望使用Javascript执行此操作？我认为还有更好的选择