자바스크립트 이벤트 등록방법 노드요소에 이벤트 함수 등록하기

 

자바스크립트 에서 이벤트를 등록하는 방법 중 하나는
요소노드의 속성에 함수를 등록하는 방식이다.
하기 Syntax 에서 HTML 요소에 속성을 주어서 처리하는 방식은 지난시간 보았고
이번 시간 소개되는 방식이 바로 자바스크립트에서 요소노드에 직접 이벤트 함수를 등록하는 방식이다. 둘다 큰 범주에서는 동일하다.

코드를 보자.

  <button>Click</button>

  <script>

    const button = document.querySelector("button");

    button.onclick = function(){

      alert("click");

    }   

  </script>

document.querySelector()를 사용해서 버튼 요소를 가져온다.
가져온 버튼요소의 이벤트 속성에 함수를 등록한다.
버튼 클릭이 발생하면 해당 함수가 실행되는 구조이다,