이벤트 핸들링

이벤트(event)?

• 웹 프로그래밍에서 이벤트란, DOM에서 발생하는 다양한 액션 또는 상호작용 동작을 나타내는 프로그래밍 인터페이스이다.
  예시
• 웹페이지 사용자가 버튼을 클릭(클릭 이벤트)
• 웹페이지 사용자가 키보드를 누름(키다운 이벤트)
• 입력 폼의 내용을 제출(제출 이벤트) 등

다양한 상황에 대한 통칭이 이벤트이다.

이벤트 핸들러?

이벤트가 발생되면 실행될 코드 블록을 뜻하며, 주로 함수가 이 역할을 담당한다. 이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라 한다.

addEventListener() 사용하자!

• onclick, onkeydown과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 편하고 유용한 이벤트 처리 방법은, addEventLIstener 메소를 활용하는 것이다.
• 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다.
• 같은 리스너(타겟)에 대해 다수의 핸들러를 등록할 수 있다.

이벤트 객체?

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

//click 이벤트가 발생하면 함수를 호출하겠다!
target.addEventListener('click', function(){})

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