[javascript] 6. input,change 이벤트 & 연산자

< input > 태그 이벤트

input 태그에서 발생하는 이벤트들이 있다

input 이벤트 : 입력값이 바뀔때마다 실시간으로 발생
onchange 이벤트 : 입력한 후 커서를 다른 곳에 찍으면 발생

작성방법

document.getElementById('email').addEventListener('input', function(){
  console.log('안녕')
});

📌 활용

지난 포스팅에서 만든 input 조건에 활용 가능할 듯 하다

• password가 6자리 미만일 때 알림 textholder를 삽입해볼 것이다

 <input type="password" id="pw" class="form-control">
 <p class="textholder">6자리 이상 입력하세요</p>
 
<script>
  document.getElementById('pw').addEventListener('input',function(){
            const password = $('#pw').val();
            const textholder = $('.textholder');
            
            if (password === '' || password.length > 6) {
                textholder.hide();
            } else if (password.length < 6) {
                textholder.show();
            }
        })
</ script>

---

연산자

헷갈렸던 등호 연산자

== : 느슨한 비교는 자료의 타입변환을 자동으로 하여 동일하면 true라고 판정
=== : 엄격한 비교는 자료의 타입까지 동일해야 true라고 판정