(Javascript) DOM 이벤트 객체 코드 작성 3가지 예

어떤 버튼(btn)이 존재하고, 버튼을 클릭할 때 콘솔에 "버튼이 눌렸습니다!"가 출력되게 만들려고 하는 상황을 가정하고 이벤트 객체를 JS에 구현하는 코드 작성의 사례 3가지를 신속하게 알아보자.

 

1. on ~ 속성(onclick, onkeyup 등) 사용

btn.onclick = function() {
   console.log('버튼이 잘 눌려졌습니다!')
  }

 

2. addEventListener 속성 사용

btn.addEventListener('click', function()) {
   console.log('버튼이 잘 눌려졌습니다!')
  }

 

3. 함수 선언식 사용

function handler() 
   { 
      console.log('버튼이 눌렸습니다!'); 
    }
    
btn.onclick = handler; // 함수 그 자체를 호출(함수 결과값 호출이 아님)