单独文件中的“this.variable”对象元素答案

【问题标题】：'this.variable' object element in the separate file单独文件中的“this.variable”对象元素
【发布时间】：2016-08-04 11:06:14
【问题描述】：

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 文件中？

【问题讨论】：

通过“追随好趋势”，我会使用addEventListener。

标签： javascript html this

【解决方案1】：

...onchange = update(this.jscolor)

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

onchange="update(this.jscolor)"

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

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

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

【讨论】：

【解决方案2】：

你应该在函数体内寻址this：

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

【讨论】：

【解决方案3】：

如果您正在寻找一种不显眼的最佳实践方法，请尝试以下 sn-p 之类的方法。

N.B. 显然，下面的 sn-p 是一个非常简单的示例，因为 .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>

【讨论】：