使用DOM时时机的重要性

在与我的训练营中的学生一起工作时，我帮助他们中的一些人解决了一个问题：时机。

特别是，有一件事可能一开始并不明显。

当你访问一个DOM元素的值并将其存储到一个变量中时，当DOM元素发生变化时，该变量不会被更新为新的值。

假设你有一个表单中的输入字段<input id="temperature"> ，你以这种方式获得其值。

const temperature = document.querySelector('input#temperature').value

temperature 变量在浏览器执行这个语句的时候得到了输入字段的状态值，然后这个值就永远保持不变了。

这就是为什么你不能像这样做。

const temperature = document.querySelector('input#temperature').value

document.querySelector('form')
        .addEventListener('submit', event => {
  //send the temperature value to your server
})

但你需要在提交表单时访问温度值。

document.querySelector('form')
        .addEventListener('submit', event => {
  const temperature = document.querySelector('input#temperature').value
  //send the temperature value to your server
})

另外，你可以将输入字段的引用存储在一个变量中，并在提交时用它来访问其值。

const temperatureElement = document.querySelector('input#temperature')
document.querySelector('form')
        .addEventListener('submit', event => {
  const temperature = temperatureElement.value
  //send the temperature value to your server
})