브라우저이벤트

브라우저는 창내에서 발생하는 모든 이벤트를 관장한다.

마우스이벤트 : click, contextmenu, mouseover ...
폼요소이벤트 : submit, focus ...
키보드이벤트 : keydown, keyup ...
문서이벤트 : DOMContentLoaded ...
CSS이벤트 : transitionend ...
...

이벤트핸들러

이벤트에 반응하려면 이벤트가 발생했을 때 실행되는 함수인 핸들러(handler)를 할당해야 한다.

이벤트핸들러를 할당하는 방법

1. HTML 인라인속성

<script>
  function countRabbits() {
    for(let i=1; i<=3; i++) {
      alert(`토끼 ${i}마리`);
    }
  }
</script>

<input type="button" onclick="countRabbits()" value="토끼를 세봅시다!">

2. 요소노드 프로퍼티
   요소노드 on< event >프로퍼티 핸들러

<input id="elem" type="button" value="클릭해 주세요.">
<script>
  elem.onclick = function() {
    alert('감사합니다.');
  };
</script>

3. addEventListener
   HTML속성과 DOM프로퍼티를 이용한 이벤트핸들러 할당방식은 하나의 이벤트에 복수의 핸들러를 할당할 수 없지만 addEventListener는 여러개의 핸들러를 할당할 수 있다.

element.addEventListener(event, handler, [options]);

function handler1() {
   alert('감사합니다!');
 };

 function handler2() {
   alert('다시 한번 감사합니다!');
 }

 elem.onclick = () => alert("안녕하세요.");
 elem.addEventListener("click", handler1); // 감사합니다!
 elem.addEventListener("click", handler2); // 다시 한번 감사합니다!

elem 요소노드의 click이밴트에 여러개의 핸들러할당이 가능하다.

// 이 얼럿창은 절대 뜨지 않습니다.
document.onDOMContentLoaded = function() {
  alert("DOM이 완성되었습니다.");
};
// 이 얼럿창은 제대로 뜹니다.
document.addEventListener("DOMContentLoaded", function() {
  alert("DOM이 완성되었습니다.");
});

DOMContentLoaded이벤트는 반드시 addEventListener메소드로 등록해야 한다.

이벤트객체

이벤트가 발생하면 브라우저는 이벤트객체(event object)라는 것을 만들고 여기에 이벤트관련 상세정보를 넣은 다음, 핸들러에 인수 형태로 전달한다.

<input type="button" value="클릭해 주세요." id="elem">

<script>
  elem.onclick = function(event) {
    // 이벤트 타입과 요소, 클릭 이벤트가 발생한 좌표를 보여줌
    alert(event.type + " 이벤트가 " + event.currentTarget + "에서 발생했습니다.");
    alert("이벤트가 발생한 곳의 좌표는 " + event.clientX + ":" + event.clientY +"입니다.");
  };
</script>

event.type, event.currentTarget, event.clientX / event.clientY등의 이벤트프로퍼티를 가지고 있다.

<button id="elem">클릭해 주세요.</button>

<script>
  let obj = {
    handleEvent(event) {
      alert(event.type + " 이벤트가 " + event.currentTarget + "에서 발생했습니다.");
    }
  };

  elem.addEventListener('click', obj);
</script>

핸들러를 가진 객체도 addEventListener에 사용할 수 있다.

<button id="elem">클릭해 주세요.</button>

<script>
  class Menu {
    handleEvent(event) {
      switch(event.type) {
        case 'mousedown':
          elem.innerHTML = "마우스 버튼을 눌렀습니다.";
          break;
        case 'mouseup':
          elem.innerHTML += " 그리고 버튼을 뗐습니다.";
          break;
      }
    }
  }

  let menu = new Menu();
  elem.addEventListener('mousedown', menu);
  elem.addEventListener('mouseup', menu);
</script>

class로 이벤트핸들러를 사용할 수 있다.

class Menu {
  handleEvent(event){
    this[event.type](event);
  }

  mousedown(event){
    console.log(event.type);
  }
  mouseup(event){
    console.log(event.type);
  }
}

let menu = new Menu();
elem.addEventListener('mousedown', menu);
elem.addEventListener('mouseup', menu);

하나의 요소노드에대한 여러이벤트를 처리하는 핸들러 클래스를 정의해서 사용하는 것도 좋은 방법이다.