자바스크립트의 이벤트를 처리하는 방식은 크게 나누면 3가지가 있다.

종류

HTML 에서 inline 방식

<div onClik="alert('hi');>    click    </div>

JavaScript에서 등록

이벤트 핸들러를 이벤트 대상이 되는 DOM노드 객체에 바인딩한다.

• btn: 이벤트 타겟

• onClick: on+이벤트 타입,이벤트 리스너 역할로 보면 됨

• function(){ }:이벤트 핸들러

      var btn=document.querySerctor("#id");  
      
       btn.onClick=function (){    //이벤트 핸들러
                       alert( 'hello');
                    }
  

addEventListner()메서드를 이용하는 방법

한 요소에 여러 이벤트 리스너를 등록할수 있어. 개발자에 가장 이상적인 방법이다.

• btn: 이벤트 타겟 이다.

• “click”: on 접두사를 붙히지 않는 이벤트 타입이다.

• function(){ }:이벤트 핸들러

   var btn=document.querySerctor("id");      
     
  btn.addEventListener(**"click"**,**funtion(){  //익명함수,callback
          alert("hi");
  }**);
  
  ----------------------------------
   btn.addEventListener("click",()=>alert("hi");
  });