ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [Javascript 초급] 이벤트 처리기 등록하기
      프로그래밍 언어/Javascript 2020. 1. 30. 15:43
      728x90
      반응형

      웹 브라우저에서 동작하는 프로그램은 주로 이벤트 주도형 프로그램이다. (당연 자바스크립트로 작성된 프로그램이 이에 해당)

       

      이벤트 처리기란 이벤트가 발생했을때 실행되는 함수로, 콜백 함수라고도 부른다. 

       

      자바스크립트의 핵심인 비동기는 이 콜백함수로부터 비롯된다고 볼 수 있다.

       

      비동기란, 코드를 짠 순서대로 처리되지 않는 것을 말한다. 반대로, 동기는 코드를 짠 순서대로 처리되는 것을 말한다.

       

       

       

      이벤트 처리기를 등록하는 세가지 방법을 정리해 보겠다.

       

      1. HTML 요소의 속성으로 등록하는 방법
      2. DOM 요소의 프로퍼티로 등록하는 방법
      3. addEventListener 메서드를 사용하는 방법 

       

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

      다음은 click 버튼을 누르면 콘솔에 현재시각을 표시하는 코드이다. 

      <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>시각을 콘솔에 표시하기</title>
	<script>
		function displayTime() {
			var d = new Date();
			console.log("현재 시각은 " + d.toLocaleString() + " 입니다.") ;
		}
	</script>
</head>
<body>
	<input type="button" value="click" onclick="displayTime()">
</body>
</html>

      이벤트 처리기 속성은 HTML 요소에 등록되어 있는데, 여기선 바로 이 부분이 이벤트 처리기 속성이다. 

       

      onclick="displayTime()"

      input 요소를 클릭했을 때, 함수 displayTime 이 실행된다. 

       

      여기서 onlick 부분을 이벤트 처리기 이름을 뜻하고 이것은 곧 이벤트 유형을 뜻한다. onclick은? 마우스로 클릭했음을 뜻한다. 

       

      이벤트 처리기 이름, 즉 속성에는 매우 종류가 많으니 그때그때 필요한 속성을 찾아 쓰면 된다. 

       

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

      DOM( Document Object Model) 은 자바스크립트 등의 프로그램이 HTML 요소를 조작할 수 있게 하는 인터페이스다.

      자바스크립트와 HTML 은 다른 언어이므로, 중재해주는 인터페이스가 필요한 것이다. 

       

      DOM 객체

      DOM 에서는 HTML 문서나 HTML 요소를 가리키는 객체로 자바스크립트를 사용하며, HTML 문서를 조작한다. 

      DOM의 주요객체로는,

      window: Window 객체라고 부르며 웹 브라우저 윈도우 하나 또는 탭 하나를 가리킨다.

      document: Document 객체라고 부르며 HTML 문서 전체를 가리킨다. HTML 문서에서 HTML 요소객체를 가져오거나 HTML 요소를 새로 만드는 등 HTML 문서 전반에 걸친 기능을 제공한다. 

      요소 객체: HTML 문서의 요소를 가리키는 객체다. 

      이들은 자바스크립트의 핵심 객체라고 해도 과언이 아니다. 

       

      참고로, window 와 Window 는 다르다. 앞이 대문자인 객체는 생성자를 의미한다고 한다. (아직 제대로 이해하지 못했다ㅠㅠ)

       

      그렇다면, DOM 을 사용해 이벤트 처리기를 등록하는 코드는 다음과 같다.

       

      <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>시각을 콘솔에 표시하기</title>
	<script>
		function displayTime() {
			var d = new Date();
			console.log("현재 시각은 " + d.toLocaleString() + " 입니다.") ;
		}
		// ① Window 객체의 onload 프로퍼티에 함수를 저장한다
		// 이 함수는 웹 브라우저가 문서를 모두 읽어 들인 후에 실행된다
		window.onload = function() {
			// ② input 요소의 객체 가져오기
			var button = document.getElementById("button");
			// ③ input 요소를 클릭했을 때 동작하는 이벤트 처리기를 등록한다
			button.onclick = displayTime;
		};
	</script>
</head>
<body>
	<input type="button" value="click" id="button">
</body>
</html>

      1. Window 객체에 onload 프로퍼티에 displayTime 함수를 저장한다. 

       

      이런 DOM에서 이벤트 처리기를 등록하는 이유는, HTML 과 자바스크립트 코드를 분리하기 위해서다. (가독성과 유지보수성이 좋아진다.)

      이를 위해 script 요소를 head 요소의 자식요소로 배치한다. script 요소는 동기실행 되므로, 이벤트 처리기 등록하는 작업을 HTML 문서 전체를 읽어 들인 후로 미룬다. 이를 위해 다음과 같이 window 객체의 onload 프로퍼티를 사용한다.

      window.onload = function() { ... }

      그러면 이벤트가 발생했을 때, onload 에 저장되었던 이벤트 처리기가 동작한다. 

       

      2. input 요소의 객체인 button 을 가져온다.

       

      getElementById 는 전달받은 인수를 id 속성의 값으로 가지고 있는 HTML 요소의 요소 객체를 반환한다. 

      var button = document.getElementById("button");

      3. input 요소를 클릭했을 때 동작(=onclick) 하는 이벤트 처리기를 등록한다. 

      button.onclick = displayTime();

      또는 다음과 같이 익명함수로 작성해도 된다.

      button.onclick = function () {
	var d = new Date();
    console.log("현재 시각은 "+ d.toLocaleString() + " 입니다.");
};

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

      addEventListener 로 등록한 함수는 이벤트 리스너로 부른다. 그 외 방법으로 등록한 함수는 이벤트 처리기로 부른다.

      target.addEventListener(type, listener, useCapture);

      target: 이벤트 리스너를 등록할 DOM 노드

      type: 이벤트 유형 (click, mouseup 등.. 앞선 이벤트 처리기 이름과는 달리 앞에 on 이 없음)

      listener: 이벤트가 발생했을 때 처리를 담당하는 콜백함수의 참조

      useCapture: 이벤트 단계 (true: 캡처링 단계, false: 버블링 단계)

       

      코드는 다음과 같다. 

       

      <!DOCTYPE html>
<html lang="ko">
<html>
    <head>
        <meta charset="utf-8">
        <title>현재시각</title>
        <script>
            window.onload= function(){
                var element= document.getElementById("button");
                element.addEventListener("click",function(){
                    var d = new Date();
                    console.log("현재 시각은 "+d.toLocaleString()+" 입니다. ");
                });
            };
        </script>
    </head>
    <body>
        <button id="button">click</button>
    </body>
</html>

      이 방법의 잠점은 다음과 같다.

       

      • 같은 요소의 같은 이벤트에 리스너를 여러개 등록 가능
      • 버블링 단계는 물론, 캡처링 단계에서도 활용 가능하다. 반면, DOM 요소 객체에 직접 등록한 이벤트 처리기는 버블링 단계의 이벤트만 캡처 가능 
      • removeEveneListener, stopPropagation, preventDefault 를 활용하여 이벤트 전파를 정밀하게 제어 가능
      • HTML 요소를 포함한 모든 DOM 노드에 이벤트 리스너를 등록 가능

       

      이벤트 리스너와 이벤트 처리기는 인수로 이벤트 객체를 받는다. 이벤트 객체는 이벤트의 정보(이름, 요소, 객체 등등)를 프로퍼티로 가져서, 그 정보에 따라 프로그램 동작 제어가 가능하다. 

       

       

       

      이상 이벤트를 등록하는 세가지 방법을 알아보았다.

       

      아마 코딩 실력이 쌓이면 손에 익는거 하나만 주로 사용하게 되겠지만, 나 같이 초보는 모두 알아놓는 것이 좋을 것 같다. 

       

       

      여기서 설명하지 않은 버블링 단계, 캡처링 단계 등등은 이벤트 전파 과정에서 소개한다. 

       

       

       

       

      (이 글은 이소 히로시 저서 모던 자바스크립트 입문 책과 제로초님의 자바스크립트 유튜브 강좌를 듣고 공부한 내용을 정리했습니다.)

       

      728x90

      '프로그래밍 언어 > Javascript' 카테고리의 다른 글

      [부스트 코스] 자바스크립트 - FE  (0) 2020.03.13
      [Javascript 초급] 객체와 배열, 함수의 기초  (0) 2020.02.03

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바