Javascript：元素 onchange 事件异步/等待回调答案

【问题标题】：Javascript: element onchange event async/await callbackJavascript：元素 onchange 事件异步/等待回调
【发布时间】：2020-08-01 01:53:44
【问题描述】：

我希望这个问题不要重复。我有两个 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);
   }
">

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

【问题讨论】：

第一个 sn-p 通过 IIFE 执行方法。第二个没有。
当您在标签的属性中分配“onchange”时，正如您所做的那样，您必须包含整个脚本，包括“（）”才能执行功能。如果您在脚本中分配它，例如“myinput.onchange =”而不是在标签中，那么您只需使用函数名称或函数定义。

标签： javascript

【解决方案1】：

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

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

调用：

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

不调用

onchange='someFn'; // returns function.

【讨论】：

【解决方案2】：

第一个示例是所谓的self invoking function。这就是为什么 is 被包裹在 () 中，后跟 () 来立即调用函数的原因。

第二个答案不起作用，因为您实际上并没有调用它。只需添加“const myFunc = async () => {}”并在按钮单击时调用“myFunc”。

【讨论】：