JavaScript

이벤트 처리기로 등록하는 세가지 방법

알아가는 번데기 2020. 6. 27. 15:42

 

이벤트 처리기란?

이벤트가 발생했을떄 실행되는 함수를 말한다, 이벤츠 처리로 등록하는 방법으로 세가지가 존재한다

 

1. HTML요소의 속성으로 등록하는 방법

2. DOM 요소의 프로퍼티로 등록하는 방법

3. addEventListener 메서드를 사용하는방법

 

 

HTML 요소의 속성으로 등록하는 방법

<input type="button" value="click" onclick="displayTime()">

 type = 액션의 타입을 지정한다

 value = 지정값 (view의 보여지는 값)

 onclick = 이벤트 처리기의 종류를 나타내는 이름으로 onclick을 포함한 여러가지 이벤트 처리기가 존재한다. (onclick, ondblclick, onmousedown 등등)

 

위와 같은 선언으로 input 태그는 버튼이 클릭되었을때 이벤트처리기 뒤에 선언되는 함수의 기능을 실행하게 된다.

 

displayTime()

<script>
			console.log("test22");
				function displayTime() {
					var d = new Date();
					console.log("현재 시각은"+d.toLocaleString()+"입니다.");
				}
</script>

위와 같이 HTML요소에 이벤트처리기 속성을 사용하여 자바스크립트 함수를 등록할 수 있지만, 자바 스크립트와 HTML코드가 뒤섞인다는 단점이 발생한다.

 

HTML코드와 자바스크립트 코드를 분리하여 가독성과 유지보수성을 높이기 위해 DOM에서 이벤트 처리기를 등록할 수 있다.

 

 

 

DOM을 사용해서 이벤츠 처리기 등록하기. 

 

DOM에서 존재한는 HTML 문서와 요소를 가르키는 객체로 자바스크립트를 사용하여 HTML 문서를 조작할 수 있다.

 

DOM 주요 객체

 - window : 웹 브라우저 원도우 하나 또는 탭 하나를 가리킨다.

 -  document : HTML 문서 전체를 가르키며 HTML 문서 전반에 걸친 기능을 제공한다.

 - 요소객체 : HTML 요소를 가르키는 객체

 

<haed>
<script>
// 함수
		function displayTime() {
				var d = new Date();
				console.log("현재 시각은"+d.toLocaleString()+"입니다.");
			}
               
  // DOM 방식 이벤트 처리기
		window.onload = function(){ *함수 명을 지정하는것이 디버깅할때 편하다!
			// window객체 onload 메서드를 사용하여 이벤트처리기용 함수를 저장한다.
			var button = document.getElementById("button"); // input 요소의 객체 가져오기
			button.onclick = displayTime; // input 요소를 클릭했을 때 동작하는 이벤트 처리기로 기능을 할 함수를 등록한다. 
		}
</haed>
</script>
<body>
<input type="button" value="click" id="button">
</body>

* 원래 script요소가 실행되는 시점은 body 요소를 읽어 들이지 못한 시점으로 이벤트처리기에서 지정한 input태그를 읽지 못한다, 그러나 window객체의 onload 프로퍼티를 사용하여 이벤트 처리기를 등록하게 될 경우 script가 실행되다가 이 코드를 만나게 될 경우 HTML문서 전체를 모두 읽어 들인후에 함수를 실행 시키게 된다.   
* 이벤트 처리기로 지정한 함수는 웹 브라우저가 문서를 모두 읽어 들인 후에 실행된다 = window.onload = function()

* 이벤트 처리기 함수를 지정할때 이름을 붙이면 함수를 식별하게 되어 디버깅 하기가 편해진다!

 

- 이벤트 처리기 제거 방법

button.onlick = null; null 대입하여 기본값으로 원복한다.