54. (javascript/자바스크립트) 자바스크립트 이벤트 (event) 등록 방법 정의 - 이벤트 즉시 등록 , addEventListener 등록 , function 호출

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

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

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

​

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

[JS 소스 코드]

    <script>
    	/* 
    	[요약 설명]
    	1. window.onload : 웹브라우저 로딩 완료 상태를 정의합니다 (로딩 완료 후 상시 대기)
    	2. main(this) : main 함수를 호출하면서 자기 자신 id를 넘겨줍니다    	
    	3. addEventListener(이벤트, 전달 함수, 이벤트 방식); : 이벤트 방식 false는 버블링 방식 (하위에서 상위로 전달) , true는 캡쳐 방식 (상위에서 하위로 전달)
    	4. [addEventListener 이벤트 종류] : 
    		change (변동 발생), click (클릭 발생), focus (포커스 발생), keydown (키 터치), keyup (키 터치 종료)
    		load (로드 완료), mousedown (마우스 클릭), mouseout (마우스 객체 밖으로 이동), mouseover (마우스 객체 위에 올림)
    		mousemove (마우스 이동), mouseup (마우스 클릭 종료), select (선택 발생), touchstart (터치 시작) ,touchmove (터치 이동)
    		touchend (터치 종료) 등 ...
    	*/
    	
    	
    	/* html 최초 로드 및 이벤트 상시 대기 실시 */
    	window.onload = function() {
			console.log("[window onload] : [start]");
			
			
			
			/* 객체 즉시 등록 방법  */
			document.getElementById("btn_one_container").onclick = function(evt) {
				console.log("[window onload] [btn_one_container] : [click]");				
			};
			
			
			
			/* addEventListener 이벤트 등록 방법  */
			var btn_two_container = document.getElementById("btn_two_container");
			btn_two_container.addEventListener("click", clickFunction, false);
			
			// 클릭 이벤트 처리 함수 등록
			function clickFunction(evt) {
				// 클릭된 객체 id 값 확인
				var tagId = evt.target.id;
				console.log("[window onload] ["+tagId+"] : [click]");    			
			};
			
    	};
    	
  	    	
    	
    	/* function 이벤트 함수 정의 */
    	function main(tagId) {    		
    		/* 객체 id 확인 실시 */
    		console.log("[main] ["+tagId.id+"] : [click]");    		    		    		
    	};    	    	
    	
    </script>

​

[BODY 소스 코드]

<!-- 버튼 레이아웃 -->
<div id = "btn_one_container">
	<p id = "btn_one_txt">one</p>
</div>


<!-- 버튼 레이아웃 -->
<div id = "btn_two_container">
	<p id = "btn_two_txt">two</p>
</div>


<!-- 버튼 레이아웃 -->
<div id = "btn_three_container" onclick = "main(this);">
	<p id = "btn_three_txt">three</p>
</div>

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

​

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

[결과 출력]

​

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

​

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

[요약 설명]

​

/*

[요약 설명]

1. window.onload : 웹브라우저 로딩 완료 상태를 정의합니다 (로딩 완료 후 상시 대기)

2. main(this) : main 함수를 호출하면서 자기 자신 id를 넘겨줍니다

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

4. [addEventListener 이벤트 종류] :

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

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

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

   touchend (터치 종료) 등 ...

*/

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