• Q&A
  • 회원가입
  • 로그인

[DOM_Event] JS - focusout 이벤트 (= onfocusout 속성) - 해당요소(또는 자식요소) 포커스 잃을 때 이벤트 발생. (= onfocusout이벤트 = 온포커스아웃 이벤트)

목차

  1. focusout() 예제 - 포커스 잃을 때 영문을 대문자로 자동 변환
  2. focusout() 정의
  3. focusout() 구문
  4. focusout() 예제 - (onfocusin / onfocusout) 이벤트 함께 걸 때
  5. focusout() 예제 - (focus / blur) 이벤트를 addEventListener() 메서드로 걸 때
  6. focusout() 예제 - (focusin / focusout) 이벤트를 addEventListener() 메서드로 걸 때


focusout() 예제 - 포커스 잃을 때 영문을 대문자로 자동 변환

 

<input type="text" id="hz" onfocusout="homzzang()">


<script>

function homzzang() {

  var x = document.getElementById("hz");

  x.value = x.value.toUpperCase();

}

</script>

 

결과보기

 

focusout() 정의

 

요소가 포커스 잃을 때 이벤트 발생.

 


 

1.

onblur 이벤트와 유사하나 아래와 같은 차이점 존재.

  • onblur 이벤트 : 이벤트 확산 X
  • onfocusout 이벤트 : 이벤트 확산 O

∴ 요소 또는 해당 자식이 포커스 잃는지 확인하려면 onfocus

 

2.

focusout 이벤트의 반대는 focusin 이벤트임.

 

3.

  • (HTML / JS)의 속성으로 사용할 경우: onfocusout 형태
  • JS addEventListener() 메서드의 매개변수 경우: focusout 형태

 

4.

  • 이벤트확산: O
  • 취소가능성: X
  • 이벤트타입: FocusEvent
  • 지원HTML: 모든 HTML 요소 (단, <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title> 요소는 제외)
  • DOM 버전: Level 2 Events

 

5.

주요 브라우저 모두 지원.

[주의] onfocusout JS속성 방식 경우 오작동 할 수도 있으니, HTML 속성 방식이나 addEventListener() JS메서드 방식 이용해야 함.

 

 

focusout() 구문

 

HTML 속성 방식

<element onfocusout="myScript">

 

JS 속성 방식 (주의: Chrome, Safari, Opera 15+ 등에서 오작동 가능)

object.onfocusout = function(){myScript};

 

JS 매서드 방식

object.addEventListener("focusout", myScript);

 

 

focusout() 예제 - (onfocusin / onfocusout) 이벤트 함께 걸 때

 

<input type="text" id="hz" onfocusin="focusCase()" onfocusout="blurCase()">


<script>

function focusCase() {

  document.getElementById("hz").style.background = "yellow";

}


function blurCase() {

  document.getElementById("hz").style.background = "red";

}

</script>

 

결과보기

 

focusout() 예제 - (focus / blur) 이벤트를 addEventListener() 메서드로 걸 때

※ 주의: (focus/blur) 이벤트 경우 기본적으로 이벤트 확산 안 하므로, addEventListener() 매서드의 useCapture 매개변수를 true로 설정 필요.

 

<form id="hzform">

  <input type="text" id="hz">

</form>


<script>

var x = document.getElementById("hzform");

x.addEventListener("focus", focusCase, true);

x.addEventListener("blur", blurCase, true);


function focusCase() {

  document.getElementById("hz").style.backgroundColor = "yellow";  

}


function blurCase() {

  document.getElementById("hz").style.backgroundColor = "";  

}

</script>

 

결과보기

 

focusout() 예제 - (focusin / focusout) 이벤트를 addEventListener() 메서드로 걸 때

※ 주의: (focusin / focusout) 이벤트 경우 기본적으로 이벤트 확산하므로, addEventListener() 메서드의 useCapture 매개변수를 true로 설정할 필요 없음.

 

<form id="hzform">

  <input type="text" id="hz">

</form>


<script>

var x = document.getElementById("hzform");

x.addEventListener("focusin", focusCase);

x.addEventListener("focusout", blurCase);


function focusCase() {

  document.getElementById("hz").style.backgroundColor = "yellow";  

}


function blurCase() {

  document.getElementById("hz").style.backgroundColor = "";  

}

</script>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012