[javascript] blur와 focus

focus 이벤트는 요소가 포커스를 받을때

blur 이벤트는 포커스를 잃을 때 발생한다.

javascript.info에 설명이 잘 되어있어서 참고해서 적었다 

input.onblur = function(){
	if(!input.value.includes('@')) {
      input.classList.add('invalid');
      error.innerHTML = "올바른 이메일 주소를 입력하세요."
    }
   };
   
input.onfocus = function() {
  if (this.classList.contains('invalid')) {
    // 사용자가 새로운 값을 입력하려고 하므로 에러 메시지를 지움
    this.classList.remove('invalid');
    error.innerHTML = "";
  }
};

 

blur 핸들러에선 필드에 이메일이 잘 입력되었는지 확인을 한 후 , 입력되지 않은 경우에 에러를 보여준다

focus 핸들러에서는 에러 메세지를 숨긴다 (이메일 재확인은 blur)

쉽게 생각하면 blur에서 이메일 유효성 검사와 에러 메시지, 재확인을 하고 focus는 메세지를 숨기는 역할을 한다.

 

 

https://ko.javascript.info/focus-blur

focus와 blur

자세한 내용은 여길 참고하면 된다.