Question

我正在学习Svelte的教程，并给出了这个示例，并对它的工作方式感到困惑。（我删去了其他与问题无关的代码，完整示例在这里：https://svelte.dev/tutorial/tick）

<script>
   async function handleKeydown(event) {
     const { selectionStart, selectionEnd, value } = this;

     await tick();
     this.selectionStart = selectionStart;
     this.selectionEnd = selectionEnd;
   }
</script>

<textarea value={text} on:keydown={handleKeydown}></textarea>

有人可以解释一下这里如何使用“ this”的逻辑吗？我不明白如何知道文本区域中的值。它与textarea调用的函数以及在引用textarea元素的函数内创建上下文有关吗？

还有为什么下面的代码不起作用？（控制台日志未定义）

function logger(event) {
 console.log(event.value)
}

Answer 1

this由DOM提供。

Form MDN在DOM onevent handlers上的文章：

调用事件处理程序时，处理程序内部的this关键字将设置为在其上注册了处理程序的DOM元素。

svelte是一个在DOM之上构建的框架，但实际上on:keydown={handleKeydown}转换为具有上述引用属性的DOM事件处理程序绑定。

Svelte在这种情况下如何使用'this'关键字？

1 个答案: