SvelteKit的each循环中如何正确获取当前DOM元素this

原写法失效的核心原因是：箭头函数没有自身的this绑定，内部的this会继承自定义位置的外层词法作用域，在Svelte组件语境下这个值根本不指向当前触发事件的img节点，自然无法操作DOM类名。

针对img加载完成后操作当前元素的场景，有两种通用可靠的实现方案：

• 方案1：从事件回调参数中获取当前元素
  所有Svelte的DOM事件回调都会默认传入事件对象，事件对象的currentTarget属性永远指向绑定了当前事件的DOM元素，不会受事件冒泡影响，是事件场景下最简便的写法：

  {#each data as item, i}
    <img 
      src={item.src}
      on:load={(e) => {
        e.currentTarget.classList.add("x");
      }}
    />
  {/each}
  

  注意不要误用e.target：如果绑定事件的元素内部存在子元素，事件冒泡阶段target可能指向实际触发事件的子节点，和你要操作的绑定事件的元素不是同一个，currentTarget不存在这个问题。

• 方案2：使用bind:this绑定DOM引用
  如果你需要在事件之外的其他逻辑里也能访问循环内的DOM元素，可以用Svelte原生的bind:this指令，把每个渲染出的元素按索引绑定到数组中存储：

  <script>
    // 按索引存储所有循环渲染的img DOM引用
    let imgRefs = []
  </script>
  
  {#each data as item, i}
    <img 
      src={item.src}
      bind:this={imgRefs[i]}
      on:load={() => {
        imgRefs[i].classList.add("x");
      }}
    />
  {/each}
  

  如果你的列表是动态增删的，记得在列表项移除时清空对应位置的引用，避免不必要的内存占用。

内容的提问来源于stack exchange，提问作者John Anderson