Question

我有这个Javascript / HTML片段：

＆＃13;

var data = Data()
data += 1
data += 1.0
data += UInt8(1)
data += "1"

＆＃13;

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();

＆＃13;

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

问题：
如何在代码＆＃34; select.onchange＆＃34;上运行多个函数？一部分？

我试过这样的事情：

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

正如预期的那样，它不起作用。

我想尽可能坚持我的代码。

我也搜索了一些相关的问题，但没有任何帮助。

提前谢谢你们！

Answer 1

试试这个

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

Answer 2

select.setAttribute('onchange','updateMe(); updateMeToo(); updateMeAlso();');

是我惯常的做法，我知道你已经接受了答案，但这样做也很好。

Answer 3

您可以使用 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);

你可以阅读更多有关神秘＆＃39;神秘的＆＃39;第三个参数（useCapture）here

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

的示例

// 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
);

Javascript：使用onChange运行多个函数

3 个答案: