Javascript:元素 onchange 事件异步/等待回调

Question

我希望这个问题不会重复。我有两个 HTML 元素，其中一个元素在更改时必须通过名为 foo() 的异步方法填充另一个元素的值。

以下代码有效:

<input type="text" id="elem">
<input type="file" onchange="
    (async ()=>{
       document.getElementById('elem').value = await foo(this);
    })()
">

下面的不会(控制台不会抛出异常，#elem 不会更新):

<input type="text" id="elem">
<input type="file" onchange="
   async ()=>{
      document.getElementById('elem').value = await foo(this);
   }
">

为什么第一个示例有效而第二个示例无效？

Answer 1

(function() {...})() 这会调用函数。这就像调用一个命名函数 someFunction()

在您的第二个示例中，您只是创建了一个函数而不调用它。它返回函数本身。

1. 调用:

onchange='someFn()'; // calls function

1. 不调用

onchange='someFn'; // returns function.