[Javascript] 이벤트리스너 input, change의 차이

두 input중 위에 것이 input 이벤트리스너, 밑에 것이 change 이벤트리스너를 쓴 것이다.

우선 조건은 6자이상 입력하는 것이다.

보기에 두개의 차이는 input의 경우 값이 입력될 때마다 숫자가 변하는 것을 볼 수 있는데, change는 마우스커서를 다른 곳으로 옮기면 값이 변한다.

 

HTML

  <form action="" id="input">

    <input type="text" class="input-box">

    <p class="i-message">(input) 아이디를 입력하세요.</p>

  </form>

  <form action="" id="change">

    <input type="text" class="change-box">

    <p class="c-message">(change) 아이디를 입력하세요.</p>

  </form>

 

HTML은 단순하게 form태그 안에 input태그 하나만 넣어주고 밑에 설명만 적어준다.

 

CSS

#input,

#change{

  margin-left: 300px;

  margin-top: 100px;

}

.input-box,

.change-box{

  width: 500px;

  height: 100px;

  font-size: 40px;

}

.i-message,

.c-message{

  font-size: 30px;

  color: red;

}

 

CSS 또한 크게 설정할 것은 없다.

 

JAVASCRIPT

document.querySelector('.input-box').addEventListener('input',function(){

  let iLength = document.querySelector('.input-box').value.length;

  if(iLength >= 6){

    document.querySelector('.i-message').innerHTML = `글자수 조건 만족~`

  }else if(iLength == 0){

    document.querySelector('.i-message').innerHTML = `(input) 아이디를 입력하세요`

  } else if(iLength > 0 && iLength < 6){

    document.querySelector('.i-message').innerHTML = `${6 - iLength}자 더 치세요~`

  }

});

document.querySelector('.change-box').addEventListener('change',function(){

  let cLength = document.querySelector('.change-box').value.length;

  if(cLength >= 6){

    document.querySelector('.c-message').innerHTML = `글자수 조건 만족~`

  }else if(cLength == 0){

    document.querySelector('.c-message').innerHTML = `(change) 아이디를 입력하세요`

  } else if(cLength > 0 && cLength < 6){

    document.querySelector('.c-message').innerHTML = `${6 - cLength}자 더 치세요~`

  }

});

 

우선 input-box의 이벤트리스너부터 살펴보자면, input태그를 넣고 함수 안에 iLength라는 input-box의 글자 수를 체크해준다. input 태그 안에 글자 수를 확인하려면 꼭 value를 넣고 length를 넣어줘야한다.

그리고 글자길이 6자를 기준으로 넘으면 만족, 0일땐 입력, 1~6사이에서는 남은 숫자만큼 더 쳐라는 멘트를 남긴다.

change-box에도 똑같이 함수를 작성하는 대신에 이벤트리스너만 change로 바꿔준다.

 

input과 change는 form태그 안에 input태그의 변화를 감지하는 것은 맞지만 input은 value의 값이 변할 때 마다 감지하지만 change는 마우스를 다른 곳에 찍었을 때 감지하는 것을 보인다. 즉, input에 대한 focus를 잃어버렸을 때 첫 감지를 한다는 것이다.

 

??자 더 치세요~ 하는 부분에서 6 - length 생각 못하고 처음에 count = 6 변수 만들어서 변화할 때마다 count--로 했는데 글자를 치고 지우고하는 부분에서도 계속 count의 숫자가 작아졌다. 그래서 검색하다보니 keydown이라는 이벤트리스너를 알게됐는데 이거는 backspace랑 del키도 감지가 가능했다. 그래서 keydown으로 수정하면서 갑자기 length를 저 백틱에 넣으면 되겠구나하는 생각이 번뜩 떠올라서 바로 keydown 지우고 원래 하던 방식으로 했다.

아 그리고 처음에 length변수를 함수 밖에 썼는데 조건문을 써도 계속 안되길래 console.log 찍어봤는데 함수 밖에 있는 length변수는 0으로 숫자가 계속 올라가고 함수 안에 넣으니까 숫자가 올라갔다.

이렇게 하나하나 해결해가고 검색해서 새로운걸 알게 될 때마다 보람도 차지만 세상에 내가 모르는 것들이 너무 많다는 생각도 든다.