addEventListener()

• onclick, onkeydown과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것 보다 현대적인 방법은, addEventListener 메소드를 활용하는 것.

클릭 이벤트 핸들러를 등록하는 경우

• // on이벤트를 사용하는 방식
  target.onclick = function () {}
  
  // addEventListener의 방식
  target.addEventListener ('click', function() {})
  

• 위 코드 2가지는 동작하는 결과는 완벽히 동일하다.
  • addEventListener를 사용하는 이유
    • 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다.
    • 같은 리스더(타겟)에 대해 다수의 핸들러를 등록할 수 있다.
    • 추가적인 옵션 사항들이 제공된다.

• 이렇게 인자에다가 함수를 전달하는 방식을 콜백함수 라고도 한다.

이벤트 객체

• 이벤트 객체는 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 장동으로 전달되는 데이터이다.
• 이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 전달받을 수 있도록 해야 한다.

  • // click 이벤트가 발생하면 함수를 호출
    target.addEventListener('click', function() {})
    
    // click 이벤트가 발생하면 함수 호출
    // + 이때 자동으로 전달되는 이벤트 객체를 매개변수 event에 대입
    target.addEventListener('click', function(event){})
    

• 이벤트 핸들러 함수에 매개변수를 추가하게 되면 이를 통해 이벤트 객체를 활용할 수 있게 된다.