웹 프로그래밍/JavaScript

<22.05.02> JavaScript 공부 일지 #06. Javascript를 이용한 이벤트 처리

mayberry 2022. 5. 2. 14:36

JavaScript 공부하기 #06

 

오늘은 웹 어플리케이션 개발에 있어 필수적으로 알아야 하는 개념인 이벤트에 대해서 공부해보고자 한다. 이벤트에 대한 개념과 관련 요소들을 살펴본뒤, HTML과 JavaScript를 통해 동적인 웹 페이지를 구성하는 방법에 대해 알아보고자 한다.

 

 

1. Event란?

 

 

정적인 HTML을 위해 개발자가 미리 준비하는 이벤트. 위처럼 화려하고 낭만적일수도..

 

웹 어플리케이션 개발에 있어서 이벤트란, 단말기와 어플리케이션이 처리할 수 있는 동작이나 사건을 의미한다. 웹 브라우저에서 동작하는 프로그램은 기본적으로 이벤트 주도형 프로그램이라고도 하는데, 이는 이벤트가 발생할 때까지 기다렸다가, 이벤트가 발생했을 때 미리 등록해둔 작업을 수행하는 프로그램을 의미한다.

 

예를 들면, 어떤 웹페이지에서 버튼을 클릭했는데 팝업창이 뜬다던가, 웹 페이지 내 어떤 요소에 커서를 갖다대었을 때 요소의 형태나 색깔이 변화하는 것과 같은 것들을 이벤트(Event)라고 한다.

 

 

2. 이벤트 처리기

 

 

이벤트 처리기는, 이벤트가 발생했을 때 실행되는 함수를 의미한다. 이를 위해 개발자가 자바스크립트로 함수를 선언하고, HTML 요소와 개발자가 작성한 함수를 연결하는 과정이 필요하다. 함수를 이벤트 처리기로 등록하는 방법은 총 세 가지가 있는데, 오늘은 두 가지만 살펴볼 것이다.

 

1. HTML 요소의 속성으로 직접 등록하기

 

2. DOM 요소의 프로퍼티로 등록하기

 

 

2-1. HTML 요소의 속성으로 직접 이벤트 등록하기

 

 

HTML 요소의 속성에 직접 접근하여 이벤트를 등록하는 방법에 대해 알아보자. 이 방법은, HTML 태그와 javascript 코드가 같이 섞인다는 특징이 있다. 아래와 같은 HTML 코드가 있다고 가정하자.

 

<button type = "button">
  VIEW
</button>

 

웹 페이지에는 아래와 같이 뜰 것이다.

 

 

위 VIEW라는 버튼을 눌렀을 때, '안녕하세요!'라는 팝업창이 뜨는 간단한 이벤트를 작성해보자. 우선 '안녕하세요!'라는 팝업창을 띄우기 위해서는 자바스크립트 코드를 아래와 같이 작성할 수 있을 것이다.

 

alert('안녕하세요!');

 

한 줄짜리의 간단한 자바스크립트 코드와 웹 페이지에 보이는 VIEW 버튼을 연결해주는 작업이 필요하다. 우리가 원하는 작업은, VIEW버튼을 눌렀을 때 '안녕하세요!'라는 팝업창이 보이게 하는 것이다. 여기서 'VIEW 버튼을 눌러 팝업창이 뜨는 것'이 바로 이벤트(Event)에 해당하며, 팝업창이 뜨게 하는 자바스크립트 함수를 '이벤트 처리기'라고 할 수 있는 것이다. 그럼 이벤트 등록을 위해서 HTML과 javascript를 어떻게 작성해주어야 할까?

 

<body>
  <button type = "button" onclick = "popup()">
    VIEW
  </button>
  <script>
    function popup() {
      alert("안녕하세요!");
    }
  </script>
</body>

 

<script> 태그는 <head> 태그에 넣어주어도 상관없고, 별도의 .js 파일을 생성하고 HTML 문서 내에는 .js 파일의 경로만 삽입해주어도 된다. 

 

위 코드에서 버튼을 나타내는 HTML 태그에서 'onclick'이라는 속성이 추가되었고, 팝업창을 띄우는 popup 함수를 <script> 태그에 따로 추가한 것이 보인다. 정리하면, <script> 내에 작성된 이벤트 처리기(함수)를 HTML 요소의 속성(onclick)에 입력해주어 이벤트를 등록해준 것이다. 

 

button 태그의 onclick과 같이 <script>의 코드를 HTML 요소에 삽입하여 이벤트를 실행하게끔 해주는 것을, '이벤트 처리기 속성', '이벤트 속성', '이벤트 유형'이라고 한다. onclick은 HTML 요소에 내장된 다양한 이벤트 유형 중 하나이며, 마우스로 클릭했을 때 나타나는 이벤트를 지정해줄 수 있는 속성이다. 아래는 이벤트 처리기 속성의 종류를 추린 것이다.

 

이벤트 처리기 이름 이벤트 종류
onclick 마우스로 클릭했을 때
ondbclick 마우스로 더블클릭 했을 때
onmousedown 마우스 버튼을 눌렀을 때
onkeydown 키보드의 키를 눌렀을 때

 

여기서 잠깐 소개한 네 개의 유형 말고도 더욱 다양한 이벤트 유형들이 있으니, 참고하여 웹 페이지 구성 시에 사용하면 된다.

 

 

2-2. DOM 요소의 프로퍼티를 사용하여 이벤트 등록하기

 

 

상술했던 이벤트 등록 방법은, HTML 요소의 속성을 사용하였는데 예시로 들은 코드는 매우 간결했기에 상관이 없지만 프로그램의 규모가 커지고 로직이 복잡해질 경우 HTML 요소와 자바스크립트 코드가 섞여 유지보수가 힘들어진다는 단점이 있다. 이를 보완하기 위해, DOM 요소의 프로퍼티를 사용하여 이벤트를 등록할 수 있다.

 

이번 방법에 대해 설명하기에 앞서, DOM이란 무엇일까? DOM(Document Object Model)이란. javascript 등의 프로그램이 HTML 요소를 직접 조작할 수 있게하는 일종의 인터페이스이다. 즉, HTML 문서 내에 포함된 모든 Tag들이 웹 브라우저에서 렌딩될 때, 각각 1대1로 대응하는 하나의 객체로 표현되고, javascript는 이렇게 표현된 객체를 통해 HTML의 Tag에 접근하여 값을 변경하거나 이벤트를 삽입할 수 있게 된다. ㅡ향후 기회가 된다면 DOM에 대한 포스팅도 진행하겠다.ㅡ

 

DOM의 주요 객체는 아래 세 개가 있다.

 

1. window : Window 객체라고 불리며, 웹 브라우저 윈도우 하나 또는 탭 하나를 가르킴

 

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

 

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

 

위에서 잠깐 사용했던 alert 메소드 역시 window 객체에서 지원하는 메소드 중 하나이며, window 객체를 사용할 때는 전역범위로 사용하기 때문에 window.alert / window.prompt 와 같은 형태로 명시하지 않아도 된다. 

 

앞서 예시로 들었던 코드를 그대로 사용하여, DOM을 사용해서 이벤트 처리기를 등록해보자.

 

<body>
  <button type = "button" id = "test_button">
    VIEW
  </button>
  <script>
    function popup() {
      alert("안녕하세요!");
    };
    
    window.onload = function () {
      var button = document.getElementById("test_button");
      button.onclick = popup;
    };
  </script>
</body>

 

이전에 소개했던 방법과 다른 점이 보이는가? <button> 태그의 onclick 속성이 <script> 태그의 onload라는 함수 속에 들어가버렸고, <button> 태그에는 "test_button"이라는 id가 생겼다. 그리고, <script> 태그에는 팝업창을 띄우는 popup이라는 함수 외에 window.onload라는 함수가 새로 선언되었다.

 

window.onload는 무엇에 쓰는 물건일까? 결론부터 말하면, window.onload를 사용하게 되면 웹 브라우저는 HTML 문서를 모두 읽은 뒤 자바스크립트 코드를 실행하게 해준다. HTML 문서 내에서 자바스크립트 코드를 삽입하게 되면, 자바스크립트 코드는 필연적으로 <script> 태그를 통해 삽입되게 되고, <script> 태그가 HTML 문서의 어디에 위치하느냐에 자바스크립트의 작동 순서가 달라지게 된다. 

 

만일 DOM을 통해서 HTML의 특정 요소에 접근하는 자바스크립트 코드가 있다고 가정하자. 그런데 <script>의 위치가 자바스크립트가 접근하고자 하는 HTML Tag보다 앞에 위치하게 된다면 어떻게 될까? 웹 브라우저가 HTML을 읽어들이는 동안, 자바스크립트 코드를 실행하게 되는데, 자바스크립트에서 접근하고자 하는 요소를 아직 읽지 않았으니 오류가 발생한다. 단적으로 아래의 코드를 보자.

 

  <body>
    <script>
      var button = document.getElementById("test_button");
      button.onclick = function() {
        alert("안녕하세요!");
      };
    </script>
    <button type = "button" id = "test_button">
      VIEW
    </button>
  </body>

 

위 코드를 작성한 뒤 크롬의 개발자 도구를 확인해보자.

 

 

HTML으로 작성한 문서는 정상적으로 출력되지만, 콘솔에는 프로퍼티를 설정할 수 없다는 오류가 출력됨을 확인할 수 있다. 당연히 VIEW 버튼을 눌러도 아무런 창이 뜨지 않는다.

 

  <body>
    <script>
      window.onload = function() {
        var button = document.getElementById("test_button");
        button.onclick = function() {
          alert("안녕하세요!");
        };
      };
    </script>
    <button type = "button" id = "test_button">
      VIEW
    </button>
  </body>

 

하지만 window.onload를 사용하여 이벤트를 등록하면, <script> 태그가 접근하고자 하는 요소보다 앞에 위치하더라도 정상적으로 이벤트를 등록할 수 있게 된다.ㅡ사실 <script> 태그는 <body> 태그의 가장 마지막에 위치시키는 것이 가장 안전하다.ㅡ window.onload 덕분에 웹 브라우저는 HTML 문서 전체를 모두 읽어 들인 후에 개발자가 등록한 이벤트/함수를 실행시킬 수 있게 되는 것이다.

 

window.onload의 역할과, 왜 사용하는지에 대해 알아보았다. 그러면, document.getElementById는 뭘까? 우선 document는 상술했듯이, HTML 문서 전체를 가리키는 객체라고 하였다.  해당 코드는 document라는 객체에 접근하여 HTML 문서 내에 쓰인 id값을 통해 HTML 요소를 검색/접근하게 한다. 

 

document 객체는, HTML 문서 내에 존재하는 요소들을 접근하기 위한 다양한 방법들을 제공한다. getElementById는 그 중 하나일 뿐이다. getElementByTagName(Tag 이름으로 검색), getElementByClassName(특정 클래스를 가진 모든 요소 검색)을 통해 HTML의 개별적 요소들에 접근할 수 있다.

 

학습자료

모던 자바스크립트 입문, 이소 히로시 지음, 서재원 옮김, 2021년, (주)도서출판 길벗

 

오늘은 이벤트의 개념과, 유형, 그리고 실제로 간단한 사례를 통해 이벤트를 등록하는 방법까지 배웠다. 다음번에도 재미있는 공부거리를 들고 포스팅하도록 하겠다.

 

P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.  

저작자표시 비영리 변경금지 (새창열림)