change event

input 혹은 select 태그에서 사용.

 

<select 태그 사용 예시>

 

HTML

    <select class="js-Country">
      <option value="none">--- Choose Your Country ---</option>
      <option value="kor">Korea</option>
      <option value="gre">Greece</option>
      <option value="tur">Turkey</option>
      <option value="fin">Finland</option>
    </select>

 

JS

const selectCountry = document.querySelector('.js-Country');

function saveValue(event){
  const selectValue = event.target.value;
  if(selectValue === 'none'){
    localStorage.clear();
  }else{
    localStorage.setItem('country', selectValue);
  }
}

selectCountry.addEventListener('change', saveValue);

 

<input 태그 사용 예시>

 

HTML

<input placeholder="Enter some text" name="name"/>
<p id="log"></p>

JS

const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('change', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

 

참고

HTMLElement: change event