事件目标. addEventListener（）
EventTarget方法**addEventListener()设置了一个函数，每当指定的事件传递到目标时，就会调用该函数。
Node.textContent
Node接口的textContent属性表示节点及其后代的文本内容。
注意：textContent**和HTMLElement.innerText很容易混淆，但这两个属性在重要方面是不同的。

let color_picker = document.getElementById("color_picker");
let hex_code = document.getElementById("hex_code");

color_picker.addEventListener("input", function () {
  let code = color_picker.value;
  hex_code.textContent = code;
  hex_code.setAttribute("href", code);
}, false);

<input type="color" name="" id="color_picker" />
HEX CODE: <a href="" id="hex_code"></a>

来源：MDN Web Docs

使用Javascript向颜色选择器添加事件侦听器，然后在选择颜色时，将锚点的innerText属性设置为目标值：

var colorPicker = document.getElementById('demo');
var anchor = document.getElementById('anchor');

colorPicker.addEventListener("input", watchColourPicker, false);

function watchColourPicker(event) {
  anchor.innerText = event.target.value;
 
}

<input type="color" id="demo">

<a id="anchor" > HEX code here. </a>

分配给input元素的一个非常简单的Input事件处理程序就足够了，如下所示：

document.querySelector('[type="color"]').addEventListener('input',function(e){
  this.nextElementSibling.textContent=this.value
})

<input type="color" id="demo">
<a id="demo" ></a>