[JavaScript] addEventListener과 onclick의 차이

JavaScript를 이용해 HTML 요소에 click 이벤트를 등록하는 경우를 생각해보자.

HTML 요소를 찾은 뒤 addEventListener를 이용하는 방법이 있고 HTML 요소에 직접 onclick을 이용하는 방법이 있다.

두 방법 다 특정 이벤트가 발생하면 정해진 함수를 실행하도록 할 수 있다.

겉보기에 같은 기능을 하는 두 방법이 왜 별도로 존재하는 것일까?

1. 표현 방식 비교

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Event</title>
  </head>
  <body>
    <button type="button" id="testButton" onclick="handleClick()">click</button>

    <script>
      function handleClick() {
        alert('clicked');
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Event</title>
  </head>
  <body>
    <button type="button" id="testButton">click</button>

    <script>
      function handleClick() {
        alert('clicked');
      }

      const buttonElement = document.getElementById('testButton');
      buttonElement.addEventListener('click', handleClick);
    </script>
  </body>
</html>

(위의 두 코드의 실행 결과는 같다)

2. 차이점

위애서 handleClick 함수는 콜백함수이다.

이벤트가 발생되었을 때 실행되는 함수라고 생각하면 된다.

2-1. 여러개의 콜백

onclick에서는 여러개의 콜백함수를 지정할 수 없다.

가장 마지막에 등록된 콜백함수만 실행될 것이다.

반대로, addEventListener를 사용하면 여러개의 콜백함수를 지정할 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Event</title>
  </head>
  <body>
    <button type="button" id="testButton">click</button>

    <script>
      let buttonElement = document.getElementById('testButton');

      buttonElement.onclick = function () {
        console.log('callback 1');
      };
      buttonElement.onclick = function () {
        console.log('callback 2');
      };
      buttonElement.onclick = function () {
        console.log('callback 3');
      };
    </script>
  </body>
</html>

onclick을 사용한 경우 마지막 콜백함수만 실행될 것이며 콘솔에는 callback 3만 출력될 것이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Event</title>
  </head>
  <body>
    <button type="button" id="testButton">click</button>

    <script>
      let buttonElement = document.getElementById('testButton');

      buttonElement.addEventListener('click', function () {
        console.log('callback 1');
      });
      buttonElement.addEventListener('click', function () {
        console.log('callback 2');
      });
      buttonElement.addEventListener('click', function () {
        console.log('callback 3');
      });
    </script>
  </body>
</html>

addEventListener를 사용한다면 콜백함수가 중복으로 등록되고 모든 콜백함수가 실행된다.

2-2. 호환성

onclick은 모든 브라우저에서 호환된다.

이에 반해 addEventListener는 인터넷 익스플로러(IE) 8버전 이하에서는 작동하지 않는다.

만약, IE 8버전 이하에 호환되어야 한다면 onclick을 사용해야 한다.

onclick을 이용해 콜백함수를 등록할 때 중복되도록 작성하고 싶다면 위에서 처럼 onclick을 사용하는 대신 attachEvent를 사용하면 된다.

2-3. 캡처링과 버블링

addEventListener를 사용한다면 이벤트 캡처링과 버블링을 제어할 수 있다.

위의 예시에서는 콜백함수만 등록했지만 세번째 인자로 boolean 값을 넣을 수 있다.

기본 값은 false이며 true를 입력한다면 버블링 대신 캡처링을 사용한다.

element.addEventListner('이벤트', 콜백함수, 버블링/캡처링);

2023.09.03 - [개발/JavaScript] - [JavaScript] 이벤트 버블링과 캡처링

[JavaScript] 이벤트 버블링과 캡처링

click 위와 같은 코드의 실행 결과는 어떻게 될까? 버튼을 클릭했을 때 버튼 클릭에 대한 콜백함수가 실행되고 button clicked만 출력되어야 할 것 같다. 하지만, 결과는 아래와 같이 div의 클릭 이벤트

29223.tistory.com

3. 결론

onclick은 DOM level-0에서 제공하던 기능이고 addEventListener는 DOM level-2에서 추가된 기능이다.

나중에 추가된 기능인 만큼 버블링/캡처링과 같은 옵션을 지정할 수 있는 것이 장점이다.

여러개의 이벤트를 등록할 수 있으며 최근의 브라우저에서는 대부분 addEventListener를 지원하기 때문에 이를 사용하지 않을 이유는 없다.

사용자가 IE 8버전 이하를 사용할 가능성이 있다면 (구형 브라우저의 호환성 문제가 있다면) onclick을 사용하는 것도 잘못된 방법은 아니다. 또한, onclick은 HTML 태그안에 바로 작성할 수 있으므로 작성한 함수가 정상적으로 동작하는지 확인하기 위해 빠르게 작성할 때 사용할 수도 있을 것이다.

따라서, 대부분의 경우에는 addEventListener를 사용하는 것을 추천하며 특별한 경우에는 onclick을 사용할 수 있음을 알고 있어야 한다고 생각한다.

저작자표시

'개발 > JavaScript' 카테고리의 다른 글

[JavaScript] querySelectorAll VS getElementsByClassName (0)	2023.09.10
[JavaScript] 이벤트 버블링과 캡처링 (0)	2023.09.03
[NodeJS] 싱글 스레드와 이벤트 루프 (0)	2023.07.29
[JavaScript] 싱글 스레드와 비동기 (0)	2023.07.23
[JavaScript] 함수 (0)	2023.02.02