为何range事件监听器内的mouseover监听器能持续生效？

1. 为什么range事件内添加的mouseover监听器能一直工作？ #

当拖动range滑块触发input事件时，代码会完成两个核心操作：

• 清空pallet容器，重新创建一批rowdivs和columndiv元素
• 给每一个新创建的columndiv绑定mouseover事件

事件绑定是一次性动作——绑定完成后，这个事件会一直附着在对应的columndiv元素上，直到元素被从DOM中移除。拖动滑块只是触发元素创建和事件绑定的时机，绑定后的事件不受滑块操作影响，只要元素存在，鼠标悬停时就会触发。

2. 为什么在range事件外部添加监听器无法运行？ #

页面加载完成后，初始状态下pallet容器是空的，columndiv元素还不存在。在range事件外部执行监听器绑定代码时，用querySelectorAll('.columndiv')会得到空集合，自然无法给不存在的元素绑定事件。

只有拖动range滑块时，代码才会动态创建这些columndiv，所以只有在这个时机绑定事件，才能找到对应的元素。

优化建议：用事件委托简化代码 #

利用事件冒泡特性，给pallet容器绑定一次mouseover事件，不用每次创建元素都重复绑定：

// 这段代码放在range事件外部，页面加载时执行即可
pallet.addEventListener('mouseover', e => {
  // 判断触发事件的目标是不是columndiv
  if (e.target.classList.contains('columndiv')) {
    e.target.style.backgroundColor = color.value;
  }
});

这样不管什么时候创建columndiv，只要它在pallet内部，鼠标悬停时都会触发事件，而且只需要绑定一次，性能更优。

内容的提问来源于stack exchange，提问作者worried