• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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)

분류 제목
DOM_Event JS - dragleave -
DOM_Event JS - dragover 이벤트 (= ondragover 속성) -
DOM_Event JS - dragstart 이벤트 (= ondragstart 속성) - 마우스드래그시작 (IE9)
DOM_Event JS - drop 이벤트 (= ondrop 속성) -
DOM_Event JS - durationchange -
DOM_Event JS - ended -
DOM_Event JS - error 이벤트 (= onerror 속성) - 외부파일로드 중 에러발생시 실행 (= 에러 이벤트 …
DOM_Event JS - focus 이벤트 (= onfocus 속성) - 포커스이벤트발생
DOM_Event JS - focusin 이벤트 (= onfocusin 속성) - 해당요소(또는 자식요소) 포커스 될 때 이벤…
DOM_Event JS - focusout 이벤트 (= onfocusout 속성) - 해당요소(또는 자식요소) 포커스 잃을 때…
DOM_Event JS - fullscreenchange -
DOM_Event JS - fullscreenerror -
DOM_Event JS - hashchange -
DOM_Event JS - input 이벤트 (= oninput 속성) ★ - 입력이벤트 (= 인풋이벤트) (IE9)
DOM_Event JS - invalid -
DOM_Event JS - keydown 이벤트 (= onkeydown 속성) ★ - 키보드키누르기 (= 키보드키누름 = 키다…
DOM_Event JS - keypress 이벤트 - [페기예고] 키보드키 눌렀을 때 실행 (= onkeypress속성 = 온…
DOM_Event JS - keyup 이벤트 (= onkeyup 속성) ★ - 키보드키 올리기 이벤트 (= keyup이벤트 =…
DOM_Event JS - load 이벤트 (= onload 속성) - 모든 웹문서 로드 완료 (= load이벤트 = 로드이벤…
DOM_Event JS - loadeddata -
2/9
목록
찾아주셔서 감사합니다. Since 2012