Svelte 3：事件处理未按预期工作答案

【问题标题】：Svelte 3: Event Handling not Working as ExpectedSvelte 3：事件处理未按预期工作
【发布时间】：2020-01-22 23:09:30
【问题描述】：

在 Svelte 3.12.1 上，当触发事件处理程序 onFilesChange 时，它会意外触发 onFileClick。

<script>
  let files = [];
  function previewImage(file) {
    return "<img src='" + file.previewURL + "' />";
  }
  function onFileClick(file) {
    console.log("onFileClick");
    files.splice(files.findIndex(x => x.name === file.name), 1);
    files = files;
  }
  function onFilesChange(event) {
    console.log("onFilesChange");
    let inputFiles = event.target.files;
    for (var i = 0; i < inputFiles.length; i++)
      files.push({inputFile: inputFiles.item(i), previewURL: URL.createObjectURL(inputFiles.item(i))});
    files = files;
  }
</script>

<input accept="image/*" multiple name="files" type="file" on:change={onFilesChange}/>
{#each files as file}
  <figure on:click={onFileClick(file)}>
    {@html previewImage(file)}
  </figure>
{/each}

但是，如果我稍微更改为使用箭头函数，那么它会按预期工作。为什么会发生这种情况，在 Svelte 3 中处理 DOM 事件的正确方法是什么？

<input accept="image/*" multiple name="files" type="file" on:change={(event) => onFilesChange(event)}/>
{#each files as file}
  <figure on:click={(file) => onFileClick(file)}>
    {@html previewImage(file)}
  </figure>
{/each}

【问题讨论】：

标签： javascript event-handling svelte-3

【解决方案1】：

on:whatever 事件处理程序值必须是将使用 DOM 事件作为参数调用的函数。 on:change={onFilesChange} 很好，因为 onFilesChange 是一个函数，它期望一个事件作为它的参数。 on:click={onFileClick(file)} 不是因为它会立即调用onFileClick(file)，而 that 的返回值应该是一个事件处理程序。

您应该使用on:click={() => onFileClick(file)}，以便事件处理程序是一个函数，该函数将被传递给DOM事件（被丢弃），然后调用onFileClick(file)。

【讨论】：