Question

HTML code：

<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 = update(this.jscolor)

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

onchange="update(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

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

NB 显然，下面的代码段是一个非常简单的示例，因为.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>

单独文件中的'this.variable'对象元素

3 个答案: