单独文件中的'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);
}

在上面的示例中，函数'update‘不能正常工作，但是如果我在html中引入这个函数

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

没问题。

所以我的问题是，如何遵循好的趋势，从html中删除事件归纳，并将其移动到单独的javascript文件中？

Answer 1

...onchange =更新(this.jscolor)

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

onchange=“更新(this.jscolor)”

这将在事件激发时执行update。

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

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

Answer 2

您应该在函数体中寻址this：

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

Answer 3

如果您正在寻找一种最佳实践、不引人注意的方法，请尝试下面的代码片段。

N.B.显然下面的代码片段是一个非常简单的示例，因为.rect只会更改为一个background-color (红色)，但您可以修改脚本，使.rect可以更改为任意数量的background-color值。

​

var jscolor = 'rgb(255,0,0)';

function update(jscolor) {
    var rect = document.getElementsByClassName('rect')[0];
    rect.style.backgroundColor = jscolor;
}

function colorUpdate() {
var colorPicker = document.getElementsByClassName('color-picker')[0];
colorPicker.addEventListener('click',function(){update(jscolor);},false);
}

window.addEventListener('load',colorUpdate,false);

.color-picker, .rect {
float: left;
width: 100px;
height: 100px;
margin-right: 40px;
}

.rect {
background-color: rgb(236,236,236);
}

<div class="color-picker">Click Me to give Rect a red background</div>
<div class="rect">Rect</div>

​