html5 addeventlistener color change
在 HTML5 中，可以使用`addEventListener`监听颜选择器的`change`事件，并在事件触发时执行相应的操作，例如改变页面元素的颜。下面是一个简单的示例，演示如何改变一个`div`元素的背景颜：
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>改变 div 背景颜</title>
</head>
<body>
   
    <input type="color" id="color-picker">
   
    <div id="color-display"></div>
html5颜代码    <script>
        // 获取颜选择器元素和颜显示 div 元素
        const colorPicker = ElementById('color-picker');
        const colorDisplay = ElementById('color-display');
        // 监听颜选择器的 change 事件，当用户选择颜时触发
        colorPicker.addEventListener('change', () => {
            const selectedColor = colorPicker.value;
            colorDisplay.style.backgroundColor = selectedColor;
        });
    </script>
</body>
</html>
```
上述代码中，首先创建了一个颜选择器和一个`div`元素，然后通过`ElementById`方法获取这两个元素，并将它们存储在`colorPicker`和`colorDisplay`变量中。接下来，使用`addEventListener`方法为`colorPicker`元素添加了一个`change`事件。当用户在颜选择器上选择颜时，`change`事件将被触发，并且函数会被调用。在函数中，通过`colorPicker.value`获取选择的颜值，并
将其设置为`colorDisplay`元素的背景颜，从而实现了实时改变`div`背景颜的效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。