정보실

웹학교

정보실

javascript DOM으로 작업 할 때 타이밍의 중요성

본문

내 부트 캠프에서 학생들과 함께 일하면서 나는 몇몇 학생들이 한 가지 문제인 타이밍을 탐색하도록 도왔습니다.


특히 처음에는 명확하지 않은 것이 있습니다.


https://flaviocopes.com/dom-timing/ 


DOM 요소의 값에 액세스하여 변수에 저장하면 DOM 요소가 변경 될 때 해당 변수가 새 값으로 업데이트 되지 않습니다.


<input id = "temperature"> 형식의 입력 필드가 있고 다음과 같은 방식으로 값을 얻는다고 가정하십시오.


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


온도 변수는 브라우저가 이 명령문을 실행하는 순간 입력 필드의 상태 값을 가져오고 값은 동일하게 유지됩니다.


이것이 당신이 이렇게 할 수 없는 이유입니다 :


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
})



페이지 정보

조회 23회 ]  작성일20-06-24 10:27
DOM

웹학교