javascript/DOM 选择对象 onchange 函数调用不起作用，但内联 HTML 起作用

Question

所以我使用 firebase 设计一个网站并从数据库调用数据来填充选择函数..

我有一个js文件，其中有很多firebase的东西，例如在html/DOM完全加载后发生的身份验证，在底部有一些声明的函数。

设置此下拉菜单时，我从数据库中检索项目来填充它，然后执行这行代码-

dropDown.setAttribute("onchange", changeTable());

要在其上添加 onchange 监听器，在我的代码中，当触发 onclick/选择项目值更改时，它会根据所选内容重新填充数据库中的项目。

问题是，这个函数被调用一次就不会再次触发。在它上面，我有这样的代码 -

classes.orderByKey().on("child_added", function(snapshot) {
    var z = document.createElement("option");
    z.setAttribute("value", snapshot.key);
    var t = document.createTextNode(snapshot.key);
    z.appendChild(t);
    dropDown.appendChild(z);
});

用数据库中的项目填充下拉菜单，当发生这种情况时，函数changeTable()被调用一次(我猜测是因为添加项目时选择了一个新值)，然后无论多少次我更改 select 选项，它不会执行任何操作，但是，如果我通过使用函数调用执行 setAttribute("onchange", changeTable()) 来更改 setAttribute 部分，并且我将该函数中的实际代码作为字符串/像这样的内联代码-

dropDown.setAttribute("onchange", "console.log("hello")");

那么那里的内联代码工作得很好吗？为什么函数调用对我来说很困惑并且只触发一次但如果我使用内联代码它就可以工作？如果可能的话，我想整理我的代码并进行函数调用...

作为与此问题相关的旁注，正如您在上面看到的，我将项目添加到按键排序的下拉菜单中，我有一个根据选择的选项填充的表格，但我需要填充将所有选项添加到 select 元素后的表，但我使用 orderByValue 调用数据库中的信息，使用类似的异步函数来执行此操作，为此，我需要从下拉列表中获取当前选定的值。无论如何，我可以让这段代码等待，直到所有值都添加到下拉列表中才能执行吗？

Answer 1

您不应该使用 setAttribute 来绑定(bind)事件处理程序，您应该使用 addEventLister()。其次，您调用该方法并将其返回的内容分配给事件。

dropDown.addEventListener("change", changeTable);