4. (jquery/제이쿼리) Jquery 사용해 body 영역 클릭 이벤트 감지 및 객체 id 확인 실시

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : jquery

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
    <script  src="https://code.jquery.com/jquery-latest.min.js"></script>


    <!-- 내부 JS 지정 -->
    <script>
    	/* 
    	[요약 설명]
    	1. window.onload : html의 로딩이 끝난 후에 시작합니다 (이미지, 영상 등 모두 로드 완료 후 실행됨)    	
    	2. $("body").click : body 영역에 있는 객체 클릭 이벤트를 확인합니다
    	3. e.target.getAttribute("id") : 클릭 이벤트가 발생한 객체 id 를 알아옵니다
    	*/
    	
    	
    	/* html 최초 로드 및 이벤트 상시 대기 실시 */
    	$(window).load(function(){
    		console.log("[window onload] : [start]");
    		
    		$("body").click(function(e){
    			// 클릭 이벤트가 발생 한 객체 id 저장
    			var tagId = e.target.getAttribute("id");
    			console.log("[window onload] : [body click] : " + tagId);    			
    		});
    	});    	    	
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[요약 설명]

1. window.onload : html의 로딩이 끝난 후에 시작합니다 (이미지, 영상 등 모두 로드 완료 후 실행됨)

2. $("body").click : body 영역에 있는 객체 클릭 이벤트를 확인합니다

3. e.target.getAttribute("id") : 클릭 이벤트가 발생한 객체 id 를 알아옵니다

*/

/* =========================== */

​