查看输入类型=颜色如何改变颜色

Question

我希望在更改颜色时看到颜色发生变化，而不是在单击其他位置后看到结果。就像在检查元素中一样，我们正在改变颜色并观看直播 - 它是如何改变的以及如何使用 js dom 做同样的事情？我尝试了 addEventListener("mousemove")、addEventListener("mousedown") 和 addEventListener("change")

document.getElementById("b").addEventListener("change",function(e){
  document.getElementById("a").style.backgroundColor = e.target.value;
})

#a {
  width: 100px;
  height: 100px;
  background-color: black;
}

<div id="a"></div>
<input type="color" id="b">

] 2 ] 2

正如你在代码中看到的，它在实时模式下没有改变，我正在改变，改变后我点击其他任何地方，颜色正在改变，我希望它像上面的 gif 中那样，改变并查看变化同一时间

Answer 1

change仅当对话关闭时触发。
你想要input的是：

跟踪颜色变化

与其他类型的情况一样<input>，有两个事件可用于检测颜色值的更改：input和change。每次颜色变化时input 都会在元素上触发。当用户关闭颜色选择器时会触发<input>该 事件。change在这两种情况下，您都可以通过查看元素的 来确定元素的新值value。

（来源：MDN | <input type="color">-> 跟踪颜色变化）

document.getElementById("b").addEventListener("input", function() {
  console.log(this.value);
  document.getElementById("a").style.backgroundColor = this.value;
})

#a {
  width: 100px;
  height: 100px;
  background-color: black;
}

<div id="a"></div>
<input type="color" id="b">