[JavaScript] 이벤트와 함수의 관계

웹 페이지에서 일어날 수 있는 이벤트의 종류

웹페이지에서 이벤트란?

웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때 등 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것

자주 사용되는 이벤트의 예

• 포커스(focus, blur)
• 폼(reset, submit)
• 뷰(scroll, resize)
• 키보드(keydow, keyup)
• 마우스(mouseenter, mouseover, click, dbclick, mouseleave)
• 드래그 앤 드롭 이벤트 (dragstart, drag, dragleave, drop)

웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있습니다.

---

이벤트와 자바스크립트 함수와의 관계

이벤트를 javascript에서 사용하기 위해서는 이벤트 핸들러를 사용해야되는데 두 가지 방법이 있다. 하지만 첫 번째 방법은 사용을 지향하기 때문에 이런 방법이 있다는 정도로만 알아두자.

1. 인라인 이벤트 핸들러(사용하지 말자!)

  button.onclick = changeColor;

문제점

• HTML pars가 어려워진다.
• 유지보수 측면에서 어렵다.
  
  

2. 이벤트 핸들러(리스너) 추가/제거

이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 한다.

button.addEventListener('click', changeColor);
// DOM객체.addEventListener('이벤트명', 함수명);
// 버튼을 '클릭'했을 때 changeColor 함수 실행

리스너 제거는 removeEventListener() 메서드를 사용한다.

장점

• 하나의 파일로 여러 파일에 적용할 수 있다.

• 이벤트 리스너를 제거할 수 있다.
  : 이벤트 리스너는 웹 애플리케이션 메모리 누수의 원인이 될 수 있으므로 해당 이벤트 리스너가 필요 없어지면 반드시 삭제해줘야 한다.

• 하나의 이벤트에 대해 여러개의 핸들러(함수)를 등록하는 것이 가능하다.

  예를 들어, 1번 인라인 핸들러의 방법으로는

    button.onclick = changeColor;
    button.onclick = changeSize;

  두 번째 줄이 첫 번째 줄에 의해 설정된 onclick의 값을 덮어쓴다.

  button.addEventListener('click', changeColor);
  button.addEventListener('click', changeSize);

  2번 이벤트 리스너를 사용하면 한 번의 클릭으로 두 가지 함수를 발생시킬 수 있다.
  

출처: https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events
https://ordinary-code.tistory.com/64