[js] 자바스크립트 onclick · addEventListener 비교 사용법

 

자바스크립트에서 클릭 이벤트 핸들러 3가지 방법과
addEventListener 와 onclick의 차이점을
알아보겠습니다.

 

이벤트 리스너는 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며,
이벤트 핸들러(event handler)라고도 합니다.

이벤트가 특정 element에서 발생하면,
웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다.

가장 보편적으로 자주 사용되는 이벤트 리스너는 click 이벤트입니다.
click event는 사용자가 element에 클릭하였을 때의 동작하는 이벤트입니다.

 

click 이벤트 사용 방법

1. onclick 이벤트 - HTML 코드에서 inline 방식 (in HTML)

• 자바스크립트를 지원하는 모든 브라우저에서 HTML 코드에서 바로 이벤트 리스너를 인라인 방식으로 넣을 수 있습니다.
• 단점: HTML 코드에 자바스크립트 코드가 추가되어 가독성이 안 좋아지며, 유지보수도 힘들어집니다.

<element onclick="myScript">
* myScript  = 리스너(작동될 함수)

 

예제1

<div onclick="alert('hello');">Click</div>

 

예제 2

<div onclick="hey();">Click</div>

<script>
  function hey() {
    alert("hello");
  }

</script>

 

2. onclick 이벤트 - 자바스크립트에 등록 (in JavaScript)

• 단점: 하나의 이벤트 리스너만을 등록할 수 있습니다.

object.onclick = function(){myScript};

 

예제 1

<div class="click">Click</div>
<script>
  let click = document.querySelector(".click");
  click.onclick = function() {
    alert("hello");
  }
</script>

 

3. addEventListener() 메서드

• 개발자가 가장 추천하는 모던한 방식입니다.
• addEventListener() 메서드는 거의 모든 브라우저에서 지원하는 이벤트 리스너 등록을 위한 메서드입니다.
• addEventListener() 메서드에서는 "on"이 붙지 않습니다.
• 단점: addEventListener() 메서드는 익스플로러 8과 그 이전 버전에서는 지원하지 않으므로,
  대신에 이와 유사한 동작을 하는 attachEvent() 메서드와 detachEvent() 메서드를 사용해야 합니다.

object.addEventListener("click", myScript);

 

예제 1

<div class="click">Click</div>
<script>
  let click = document.querySelector(".click");
  click.addEventListener("click", function() {
    alert("hello");
  });

</script>

 

자. 이제 어떤 것을 사용해야 할까요?

onclick 메소드과 addEventListener 메서드를 비교해 보겠습니다.

onclick은 overwriting이 불가능

onclick에는 하나의 콜백 함수(리스너)만 지정할 수 있지만,
addEventListener는 여러 개의 이벤트 리스너를 추가할 수 있습니다.

따라서 만약 onclick 이벤트 핸들러를 두 번 이상 사용한다면
기존 이벤트 핸들러를 덮어쓰기 때문에 가장 아래에 추가한 핸들러만 작동합니다.

 

예제

<button class="click">
  click
</button>

<script>
  let click = document.querySelector(".click");

  click.onclick = function() {
    alert("onclick1");
  }

  click.onclick = function() {
    alert("onclick2");
  }

  click.addEventListener("click", function() {
    alert("addEventListener1");
  })

  click.addEventListener("click", function() {
    alert("addEventListener2");
  })

</script>

 

결과 보기

onclick에서는 1번이 실행되지 않고, 바로 2번이 실행되고,
addEventListener에서는 모두 실행합니다.

 

브라우저 호환성

• onclick은 모든 브라우저와 버전에서 호환이 됩니다.
• addEventListener는 Internet Explorer 6,7,8 에서는 호환되지 않습니다.
• 호환성에 중점을 두고 사용한다면, 사용자가 정말 옛날 버전의 IE를 사용할 가능성 여부를 확인하여야 합니다.

 

결론

어떤 메소드를 사용해야 할까요?

위의 구형 브라우저 호환성의 문제가 있다면 onclick을 사용하지만,
그 외에는 개발자가 추천하는 모던한 방식의 addEventListener 사용을 추천합니다.