95. (javascript/자바스크립트) input text 박스에 focus , blur addEventListener 이벤트 등록 및 포커스 상태 확인

---

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

---

[소스 코드]

 

    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다    	
    	2. focus : 특정 객체의 포커스 이벤트를 감지합니다
    	3. blur : 특정 객체가 focus >> unfocus 된 상태를 감지합니다
    	4. addEventListener : 특정 객체에 이벤트를 등록합니다
    	*/


    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");

    		// input text 객체 아이디 설정
    		var tagId = document.getElementById("input_box");

    		// input 객체에 이벤트 등록 실시
    		tagId.addEventListener("focus", inputFocus, false);
    		tagId.addEventListener("blur", inputBlur, false);    		    		
    	};



    	/* [이벤트 수행 함수] */
    	function inputFocus(evt){
    		// 이벤트가 발생한 객체 id 확인 
    		var tagId = evt.target.id;
    		console.log("");
    		console.log("[inputFocus] : [start] : " + tagId); 
    		console.log("");

    		//input value 값 확인 수행
    		//var data = document.getElementById("input_box").value;    		
    	};



    	/* [이벤트 수행 함수] */
    	function inputBlur(evt){
    		// 이벤트가 발생한 객체 id 확인 
    		var tagId = evt.target.id;
    		console.log("");
    		console.log("[inputBlur] : [start] : " + tagId); 
    		console.log("");

    		// 입력된 vale 값 확인 실시 
    		console.log("");
    		console.log("[inputBlur] : [value] : " + document.getElementById(tagId).value); 
    		console.log("");
    	};
    	
    </script>

---

[결과 출력]

​

---

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다

2. focus : 특정 객체의 포커스 이벤트를 감지합니다

3. blur : 특정 객체가 focus >> unfocus 된 상태를 감지합니다

4. addEventListener : 특정 객체에 이벤트를 등록합니다

*/

---