Question

我有多个选择元素，需要在更改时执行javascript函数。我想创建一个通用函数，因此可以为该函数设置多个onchange方法。

这行得通，并且完全符合我的要求：

myselect.onchange = function() {
   *some code*
}

但是，使用完全相同的代码，但使用在onchange事件外部声明的命名函数，如下所示：

function myfunc(){
   *some code*
}

myselect.onchange = myfunc();

如何创建命名函数并将其onchange方法设置为该函数？这可能吗？否则会有很多重复的代码：（

编辑：在我的示例中，我没有接受参数的函数。为了使它对我的多重选择有用，我需要给它传递一个参数。不使用括号怎么办？

Answer 1

javascript中的函数实际上是一等公民，这意味着它们可以分配给变量，可以作为参数传递，甚至可以分配为其他函数的返回值。

因此，当您这样做时：

myselect.onchange = myfunc();

您正在设置myselect的onchange属性以保存myfunc本身的返回值。

当您这样做：

myselect.onchange = myfunc;

您正在设置myselect的onchange属性以引用myfunc函数本身。

要对帖子进行最新编辑，可以在首次声明该函数时向其添加参数，并且仍然可以传递该函数。例如：

myfunc(arg1, arg2) {
  *some code*
}

myselect.onchange = myfunc;

Answer 2

表达式myselect.onchange = myfunc;的右边必须是Function对象。
只要myselect.onchange = myfunc('something');返回myfunc，就可以写function了。像这样的东西。

var select1 = document.getElementById('sel1');
var select2 = document.getElementById('sel2');
select1.onchange = myfunc('Hello ');
select2.onchange = myfunc('Good Bye ');

function myfunc(greet) {
  return function() {
    console.log(greet + this.value);
  };
}

<select id="sel1">
  <option>One</option>
  <option>Two</option>
</select>
<select id="sel2">
  <option>Three</option>
  <option>Four</option>
</select>

编辑：由于Function是一流的对象，因此它们可以作为函数参数。像这样的东西。

var select1 = document.getElementById('sel1');
var select2 = document.getElementById('sel2');
select1.onchange = myfunc(foo);
select2.onchange = myfunc(bar);

function myfunc(callback) {
  return function() {
    callback(this.value);
  };
}

function foo(val) {
  console.log('Hello from foo ' + val);
}

function bar(val) {
  console.log('Hello from bar ' + val);
}

<select id="sel1">
  <option>One</option>
  <option>Two</option>
</select>
<select id="sel2">
  <option>Three</option>
  <option>Four</option>
</select>

下拉式通用OnChange函数

2 个答案: