javascript - 如何让这段 JavaScript 代码更实用？

Question

我创建了代码作为练习。这会根据您在文本框中键入的内容更改浏览器的背景颜色。除了使用 setInterval() 方法之外，我想不出其他任何方法，但这让我很恼火。我觉得必须有一种更好的方法来做到这一点，它不涉及每十毫秒检查一次更改。有什么解决办法吗？

setInterval(function(){colorNow()},10);
function colorNow(){
    var chooseColor = document.getElementById("color").value;;
    document.bgColor = chooseColor;
}

Answer 1

我会这样做使用一个keyup事件

var chooseColor = document.getElementById("color");
chooseColor.addEventListener('keyup', function() {
    document.bgColor = chooseColor.value;
}, false);

所以这里有一点事件https://developer.mozilla.org/en-US/docs/Web/API/Event

事件 - 基本上每次用户释放键时都会调用keyup提供给事件的函数，而输入是因为我们直接将keyupfocusedeventchooseColor

该false函数的部分是default（它被称为/bubbling|bubble|bubbles/）并且它停止事件在 DOM 树上冒泡，因此如果它是true该元素的父级，则会通知该事件。 https://developer.mozilla.org/en-US/docs/Web/API/event.bubbles

演示

Answer 2

function changeColor() {
    document.bgColor = this.value;
}

document.getElementById("color").addEventListener("change", changeColor);
document.getElementById("color").addEventListener("keyup", changeColor);

Answer 3

尝试添加keyup事件：

document.getElementById('color').addEventListener('keyup', colorNow)

colorNow每次用户释放一个键（当输入一个字母时）时都会调用它。

Answer 4

您需要使用带有输入标签的 onchange 事件来调用 colorNow() 函数。

http://www.w3schools.com/jsref/event_onchange.asp