[Html] 포커스를 잃을 때, onblur 이벤트

웹으로 회원가입 페이지를 만들 때, 값을 체크하기 위해서 입력 후 점검하는 펑션 등을 호출해야 되는 경우가 있는데요. 이렇게 Html에서 포커스를 잃어버렸을 때 발생 시키는 액션을 onblur 이벤트라고 합니다.

 

예를 들어 패스워드를 입력한 후, repeat 패스워드를 입력했다고 가정을 하면 repeat 패스워드 입력 후 onblur 이벤트를 발생하여 패스워드를 체크하면 사용자는 다른 값을 입력하기 이전에 여부를 알 수도 있습니다.

 

[Html] 포커스를 잃을 때, onblur 이벤트

---

onblur 예시

<input type="text" onblur="alert('1');">

 

위 예시는 input text에 onblur 이벤트를 넣었고, 이탈할 경우 1이라는 값이 들어있는 경고창이 뜨게 됩니다.

 

onblur 부여하기

Html

<element onblur="스크립트">

 

자바스크립트

object.onblur = function() {스크립트};

 

 

 

자바스크립트 (addEventListener 사용)

object.addEventListener("blur", 스크립트);

 

---

 

참고로 onblur 이벤트는 onfocus 이벤트와 반대되는 성격의 이벤트입니다. onfocus는 현재 값에 focus를 받을 때 액션이 발생하게 되지만, onblur는 focus가 해제될 때 발생된다는 차이가 있습니다.