35. (javascript/자바스크립트) window onload 상시 대기 및 onclick , addEventListener 사용해 클릭 (click) 이벤트 정의 실시

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

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

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

​

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

[소스 코드]

 

    <script>
    	/* 
    	[요약 설명]
    	1. window.onload : 웹브라우저 내의 모든 요소가 준비되면 수행, 상시 대기 의미
    	2. getElementById : 해당 태그 id 지정 실시
    	3. addEventListener(이벤트, 전달 함수, 이벤트 방식); : 이벤트 방식 false는 버블링 방식 (하위에서 상위로 전달) , true는 캡쳐 방식 (상위에서 하위로 전달)
    	4. [addEventListener 이벤트 종류] : 
    		change (변동 발생), click (클릭 발생), focus (포커스 발생), keydown (키 터치), keyup (키 터치 종료)
    		load (로드 완료), mousedown (마우스 클릭), mouseout (마우스 객체 밖으로 이동), mouseover (마우스 객체 위에 올림)
    		mousemove (마우스 이동), mouseup (마우스 클릭 종료), select (선택 발생), touchstart (터치 시작) ,touchmove (터치 이동)
    		touchend (터치 종료) 등 ...     	
    	*/
    	
    	
    	/* 상시대기 클릭 이벤트 정의 실시 */
    	window.onload = function() {
    		
    		/* 이벤트 감지 위한 객체 id 등록 실시 : 공통 */
    		var first_container = document.getElementById("first_container");
    	
    		/* 객체에 각 특정 이벤트 등록 실시 : 개별 적용 [1] */
    		first_container.onclick = function() {
    			// 결과 확인 
    			alert("first_container");
    			
    			// 이벤트 제거 [한번만 실행 : 다시 이벤트 발생 안함]
    			// first_container.onclick = null;				    		
    		}
    		
    		
    		
    		/* 객체에 각 특정 이벤트 등록 실시 : 통합 함수 적용 [2] */
    		first_container.addEventListener("click", clickFunction, false);
    		
    		function clickFunction(evt) {
    			// 선택한 div id 값 확인
    			var tagId = evt.target.id;
    			
    			// 결과 확인
    			alert(tagId);
    			
    			// 이벤트 제거 [한번만 실행 : 다시 이벤트 발생 안함]
    			// tagId.onclick = null;
    		}
    		
    	};	    	    	
    	
    </script>

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

​

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

[결과 출력]

​

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

​

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

[요약 설명]

​

/*

[요약 설명]

1. window.onload : 웹브라우저 내의 모든 요소가 준비되면 수행, 상시 대기 의미

2. getElementById : 해당 태그 id 지정 실시

3. addEventListener(이벤트, 전달 함수, 이벤트 방식); : 이벤트 방식 false는 버블링 방식 (하위에서 상위로 전달) , true는 캡쳐 방식 (상위에서 하위로 전달)

4. [addEventListener 이벤트 종류] :

   change (변동 발생), click (클릭 발생), focus (포커스 발생), keydown (키 터치), keyup (키 터치 종료)

   load (로드 완료), mousedown (마우스 클릭), mouseout (마우스 객체 밖으로 이동), mouseover (마우스 객체 위에 올림)

   mousemove (마우스 이동), mouseup (마우스 클릭 종료), select (선택 발생), touchstart (터치 시작) ,touchmove (터치 이동)

   touchend (터치 종료) 등 ...

*/

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