为何addEventListener执行后元素背景色未变？移动元素后点击失效？

算力阿峰

2026-6-20

问题分析与解决方案

核心问题原因

1. 事件冒泡导致样式被覆盖

当anotherSquare被移入square2后点击它，点击事件会冒泡到父元素square2，触发之前绑定给square2的点击处理函数——这个函数会把square1和square2的背景色设为红色，直接覆盖了anotherSquare点击事件里的绿色设置，所以看不到绿色效果。

2. 重复绑定事件

每次点击anotherSquare，都会给square2新增一个点击事件监听器。多次点击后，square2会累积多个相同的事件处理函数，触发时重复执行，进一步加剧样式冲突。

修正后的代码

const anotherSquare = document.querySelector(".anotherSquare");
// 提前获取元素，避免重复查询DOM
const square1 = document.querySelector(".square1");
const square2 = document.querySelector(".square2");

anotherSquare.addEventListener("click", (e) => {
    console.log("Ok");
    // 设置目标绿色样式
    square1.style.backgroundColor = "green";
    square2.style.backgroundColor = "green";
    
    // 阻止事件冒泡，避免触发父元素square2的点击事件
    e.stopPropagation();
});

// 只绑定一次square2的点击事件，不要放在anotherSquare的点击事件里
square2.addEventListener("click", () => {
    square1.style.backgroundColor = "red";
    square2.style.backgroundColor = "red";
    // 移动元素不需要先remove，appendChild会自动把元素从原位置移除
    square2.appendChild(anotherSquare);
});

关键修改点说明

阻止事件冒泡：在anotherSquare的点击事件里调用e.stopPropagation()，避免点击事件向上传递到square2，防止红色样式覆盖绿色。
避免重复绑定事件：把square2的点击事件绑定移到外部，确保只绑定一次，不会累积多个相同的处理函数。
优化DOM查询：提前获取square1和square2元素，不用每次点击都重新查询DOM，提升性能。
简化元素移动逻辑：使用appendChild()移动元素时，不需要先调用remove()，因为元素只能存在于DOM树的一个位置，appendChild()会自动将其从原位置移除并添加到新位置。