Javascript：使用 onChange 运行多个函数

Question

我有这个 Javascript/HTML 片段：

var select = document.getElementById("selectMe");
function loadMe()
{
    select.onchange = updateMe;
}

function updateMe()
{
    alert("I am updated");
}

function updateMeToo()
{
    alert("I am updated too!");
}

function updateMeAlso()
{
    alert("I am also updated!");
}
loadMe();

<select id="selectMe">
    <option>foo</option>
    <option>bar</option>
</select>

上面的代码工作正常，但是

问题：

如何在代码的“select.onchange”部分运行多个函数？

我尝试过这样的事情：

select.onchange = updateMe; updateMeToo; updateMeAlso;

正如预期的那样，它不起作用。我想尽可能坚持我的代码。我也搜索了一些相关问题，但没有任何帮助。

Answer 1

试试这个

select.onchange = function () { updateMe(), updateMeAlso(),updateMeToo() };

Answer 2

您可以使用 addEventListener 添加任意数量的功能。

var select = document.getElementById("selectMe");

select.addEventListener("onchange", loadMe, false);
select.addEventListener("onchange", updateMe, false);
select.addEventListener("onchange", updateMeToo, false);
select.addEventListener("onchange", updateMeAlso, false);

主要好处是您可以在以后的任何时间以任何顺序删除任何这些函数（事件侦听器），而不会影响其他侦听器。只需确保您使用与添加侦听器相同的参数列表即可。

select.removeEventListener("onchange", updateMeToo, false);

您可以在此处阅读有关“神秘”第三个参数（useCapture）的更多信息

当然，这种模式不适用于匿名/箭头函数，因为您需要函数的名称（指针）才能稍后取消注册。 这是一个

不起作用的示例

// you can add anonymous function
select.addEventListener(
  "onchange",
  function () { updateMe(), updateMeAlso(),updateMeAlso() },
  false
);

// but you cannot remove anonymous function from event listeners
select.removeEventListener(
  "onchange",
  function () { updateMe(), updateMeAlso(),updateMeAlso() },
  false
);

Answer 3

select.setAttribute('onchange','updateMe(); updateMeToo(); updateMeAlso();'); 这是我的惯常做法，我知道您已经接受了答案，但这同样有效。