javascript - 单独文件中的“this.variable”对象元素

Question

HTML代码:

<input class="jscolor" id="color-picker">

   <div id="rect" class="rect"></div>

   <script src="jscolor.js"></script>
   <script src="skrypt.js"></script>

Javascript 代码:

 function update(jscolor) {
        document.getElementById('rect').style.backgroundColor = '#' +   jscolor;
}

window.onload=function() {
    document.getElementById('color-picker').onchange = update(this.jscolor);
}

在上面的示例中，函数“更新”不能正常工作，但是如果我在 html 中引入这个函数

<input class="jscolor" id="color-picker" onchange="update(this.jscolor)">

没问题。

所以我的问题是，如何顺应良好趋势，从 html 中删除事件感应并将其移动到单独的 javascript 文件？

Answer 1

...onchange = update(this.jscolor)

这会在您附加事件处理程序时执行 update。

onchange="update(this.jscolor)"

这会在事件触发时执行 update。

要以编程方式附加在事件发生时触发的事件处理程序，请执行以下操作:

document.getElementById('color-picker').addEventListener('change', function () {
    update(this.jscolor);
});