[JavaScript] 자바스크립트 이벤트의 정의와 이벤트 등록 방법

이벤트란?

 이벤트는 간단하게 사용자의 어떠한 동작에 따라 기능이 실행되는 것을 의미합니다. 이벤트는 이벤트 대상, 이벤트 종류, 이벤트가 발생했을 때 실행되는 함수, 이 3가지로 구성되어 있습니다. 이벤트 대상은 특정 태그를 의미하고 이벤트의 종류는 click, drag, onmouse 등 여러 가지 종류가 있습니다.

 

이벤트 등록 방법

자바스크립트를 이용하여 요소에 이벤트를 넣는 방법은 총 3가지가 있습니다. 그 3가지 방법으로 아래에 있는 버튼 요소를 클릭하면 콘솔에 1이 출력되도록 구현해보겠습니다. 

HTML

<button>버튼</button>

<script>
  const button = document.getElementsByTagName("button")[0];
</script>

 

인라인 이벤트 모델 방식

이벤트가 일어날 태그에 onclick속성을 만들어서 정의해놓은 함수를 속성값으로 넣어주는 방법입니다.

 

예시

<button onclick='func()'>버튼</button>

<script>
  function func() {
    console.log(1);
  }
</script>

 

프로퍼티 리스너 방식

 해당 요소에 접근하여 onclick 프로퍼티에 함수를 대입하는 방법입니다. 이 때 함수는 event 매개변수를 가져야 합니다.

예시

button.onclick = function(event) {console.log(1);};

 

addEventListener 방식

 addEventListener 메서드를 이용하여 이벤트를 등록하는 방법입니다. 첫 번째 인자로 이벤트 종류를 받고 두 번째 인자로 이벤트가 발생될 때 실행되는 함수를 넣습니다.

예시

button.addEventListener('click', function(event) {console.log(1)});