JavaScript로 버튼을 다루는 방법 2가지(onclick, addEventListenter)

JavaScript로 버튼을 다루는 방법 2가지

이전 포스팅에서 자바스크립트로 CSS의 display 속성을 조작하여 Modal 공지창을 띄워주는 방법을 알아보았습니다.

Javascript로 알림창 보이기 / 숨기기 웹 사이트에서 마우스 롤오버를 하면 숨겨져 있던 서브메뉴가 보인다거나, 공지 알림창을 클릭하면 사라지거나 하는 경우는 거의 대부분 Javascript로 CSS의 displa

kincoding.com

공지창을 띄워주기 위해서는 <button> 엘리먼트를 클릭하는 행위가 필요했는데요, 이처럼 버튼을 클릭하는 방법에 있어서도 자바스크립트는 2가지의 다른 방식을 활용할 수가 있습니다. 첫 번째 방법은 버튼의 'onclick' 속성을 사용하는 방식이고 두 번째 방법은 'Event Listener(이벤트 리스너)'를 이용하는 방법인데요, 이번 포스팅에서는 이 두가지 방식의 차이점을 정리해보도록 합니다.

button onclick 속성 이용

<button> 태그는 기본적으로 아래와 같이 onclick 속성을 사용하여, 버튼의 클릭을 감지할 수 있습니다.

<button onclick=" ">버튼</button>

지난 번 예제를 가져다가 다시 살펴봅시다.

버튼이 클릭되면 각각 hideNotice() 함수와 showNotice() 함수를 호출하여 실행하는 방식입니다.

<body>
  <div class="alert-box" id="notice">
    <p>Notice</p>
    <button onclick="hideNotice()">닫기</button>
  </div>
  <button onclick="showNotice()">버튼</button>

  <script>
    function hideNotice() {
      document.querySelector("#notice").style.display = "none";
    }
    function showNotice() {
      document.querySelector("#notice").style.display = "block";
    }
  </script>
</body>

[버튼]을 클릭하기 전, Notice 공지가 숨겨져 있다가

버튼을-클릭하기-전에는-공지창이-숨어-있습니다. — 버튼을 클릭하기 전에는 공지창이 숨어 있습니다.

버튼을 클릭하면, onclick 속성이 감지를 해서 Notice 공지창이 표시됩니다.

버튼을-클릭하면-onclick-감지로-공지창이-나타납니다. — 버튼을 클릭하면 onclick 감지로 공지창이 나타납니다.

addEventListenter

이벤트 리스너는 말 그대로 브라우저 상에서 발생하는 이벤트(Event, 사건)를 감지하는 기능을 합니다. 마우스로 '클릭(click)'하는 것도 하나의 이벤트로 감지하게 되는 것입니다.

어떤 엘리먼트를 감시(?)하기 위해서 id를 부여해주었습니다.

<button id="btnClose">닫기</button>

그리고 Javascript로 id="btnClolse"인 엘리먼트를 선택하고 addEventListener를 달아주었습니다.

button-엘리먼트에서-onclick-속성을-사용하지 않았습니다. — button 엘리먼트에서 onclick 속성을 사용하지 않았습니다.

document.querySelector("#btnClose")는 결국 <button id="btnClose">닫기</button>를 가리키게 됩니다. 여기에 addEventListener를 통해 이벤트리스너를 추가해주고, 'click'을 감지하게 되면 이후의 function 문을 수행하게 되는 방식입니다.

바뀐 코드를 비교해보세요. 결과는 동일하게 일어납니다.

addEventListener 사용법

addEventListener는 이런 형태로 사용됩니다.

addEventListener("click", function() { }) //클릭이 일어나면 콜백함수를 실행

뒤에 오는 함수(function)의 형태를 살펴보면 "함수명"이 없다는 것을 발견할 수 있습니다.

자바스크립트는 순차적으로 함수를 실행할 때, 함수명을 사용하지 않아도 되는데 이와 같은 함수를 "콜백함수(Callback Function)"이라고 부릅니다. 일단 함수명이 없이 바로 실행되는 펑션을 콜백함수라고 부릅니다. 조건이 갖춰지면 그냥 실행이 되면 되는 그런 함수라 굳이 함수명을 붙여서 사용하지 않습니다.

한편 자바스크립트의 이벤트리스너는 종류가 매우 다양하게 존재합니다.

이벤트 감지 대상을 click에서 mouseover로 변경해보겠습니다.

addEventListener("mouseover", function() { })

<body>
  <div class="alert-box" id="notice">
    <p>Notice</p>
    <button id="btnClose">닫기</button>
  </div>
  <button onclick="showNotice()">버튼</button>

  <script>
    document.querySelector("#btnClose").addEventListener("mouseover", function () {
      document.querySelector("#notice").style.display = "none";
    });

    function showNotice() {
      document.querySelector("#notice").style.display = "block";
    }
  </script>
</body>

닫기 버튼 위에 마우스를 위치 시켜보면, 버튼을 클릭하지도 않았는데 공지 팝업창이 닫히게 됩니다. 생긴 모습은 마우스로 클릭해야 할 것 같은 버튼 형태지만, 이벤트리스너는 mouseover를 감지하고 있기 때문입니다.

(TMI - 한편 :hover는 CSS에서 마우스 오버를 감지하는 가상 클래스 선택자입니다.)

마우스-오버(hover)를-감지하면-버튼이-동작합니다 — 마우스 오버(mouseover)를 감지하면, 버튼이 동작합니다

마치며

<button>의 onclick 속성은 '클릭' 동작 하나에 반응하지만, addEventListener의 경우에는 '클릭' 뿐만이 아니라, 'mouseover', 'scroll' 등 수 십 여 개의 이벤트들을 감지하고 활용할 수 있게 해줍니다. 그리고 이와 같은 이벤트 감지를 통해서 사용자들과 상호작용을 즉각 수행하도록 만들 수가 있게 됩니다.

더우기 addEventListenter를 이용하면 click이나 scroll 등의 이벤트는 물론, <div>나 <span>, <image>, <input> 등 버튼이 아닌 모든 엘리먼트들에서 발생하는 이벤트를 감지하고 조작할 수 있습니다. 한창 사용범위가 넓어지게 되는 것이죠.

어째 뭔가 점점 거대한 프로그래밍 세계를 파고 들어가기 시작하는 느낌을 가져다주는 것 같습니다.^^

즐거운 코딩생활, 즐코딩

KINcoding

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

이메일 주소를 검사하는 정규식(RegExp) 및 웹개발 적용 (0)	2023.01.24
정규식, 정규표현식, Regular Expression, RegExp 완전 기초 정리 (0)	2023.01.23
Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) (0)	2023.01.15
CSS와 JavaScript로 HTML문서 내 Style 적용하는 방법 비교 (0)	2023.01.14
Node.js + Express로 초간단 서버 만들기, 3분 컷 (0)	2023.01.08

즐코딩 - KINcoding

JavaScript로 버튼을 다루는 방법 2가지(onclick, addEventListenter)