Event

event(이벤트)는 무언가 일어났다는 신호입니다.
모든 DOM 노드는 이런 신호를 만들어냅니다.

꼭 DOM에 한정되지 않습니다.
네트워크 이벤트 : online, offline등 존재합니다.

여러가지 이벤트를 MDN에서 확인할 수 있습니다. Event reference

Evnet handler

이벤트에 대해 반응하려면, 이벤트 발생에 실행되는 함수 핸들러를 할당합니다.
핸들러는 이벤트에 어떻게 반응할지 표현한 것입니다.

핸들러는 여러가지 방법으로 할당할 수 있습니다.

HTML properties

태그의 on<event> 속성에 핸들러를 할당합니다.

<input onclick='handleClick()'> </input>

DOM propertiesd

DOM의 on<event> 속성에 핸들러를 할당합니다.

<input id='name'> </input>

name.onclick = handleClick;

이때, 함수 위 예시처럼 handleClick을 할당해야합니다.
괄호를 붇혀 호출하면 호출에 대한 반환이 onclick에 할당됩니다.

프로퍼티에 할당할때는, 복수의 이벤트 핸들러를 할당할 수 없습니다.
이후에 다시 할당하면 덮어 씌워집니다.

addEventListener

프로퍼티로 핸들러를 할당하면, 복수의 핸들러를 할당할 수 없습니다.
프로퍼티에 두번 할당하면, 내용이 덮어 씌워집니다.

addEventListner와 removeEventListner를 통해 여러개 할당할 수 있게 되었습니다.

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

이벤트 명과, 핸들러 함수, options를 전달할 수 있습니다.
options는

• once : 이벤트가 트리거 되면 리스너가 자동으로 삭제됩니다.
• capture : 이벤트를 캡쳐링, 버블링 단계중 어떻게 다룰지 알려줍니다.
• passive : true라면 지정한 함수가 preventDefault()를 하지 않는다고 알립니다.

를 프로퍼티로 갖습니다.

이벤트 객체

이벤트에 대해 핸들러에서 작업을 하기 위해서는, 이벤트를 자세히 알아야합니다.
클릭을 했다면, 포인터가 어디에 있는지 등이 필요할 수 있습니다.

이벤트가 발생하면 브라우저는 evnet object를 만듭니다.
이벤트의 상세 정보를 넣고, 핸들러에 인수로 전달합니다.

event.type : 이벤트의 타입을 말합니다.
event.currentTarget : 이벤트를 처리하는 요소입니다.
핸들러가 바인딩 되지 않았다면, this와 같습니다.

document.addEventListener('click', e=>console.dir(e))로
event객체 내부를 확인 해보세요

객체 형태 핸들러

addEventListener를 사용하면, 인자로 핸들러 함수대신 객체를 전달할 수 있습니다.
이벤트가 발생하면, 객체에 구현한 handleEvent메서드가 호출됩니다.

let obj = {
  handleEvnet() {
    alert('handler');
  }
}

elem.addEventListener('click',obj);

혹은, 클래스를 사용할 수도 있습니다.

여러 이벤트에 대해 한 객체를 할당하고,
handleEvent에서 event.type을 통해 여러 이벤트를 처리할 수 있습니다.

handleEvnet에서 모두 처리하지 않고 아래 처럼 할 수 있습니다.

const obj = {
    handleEvent(event) {
      let method = 'on' + event.type[0].toUpperCase() + event.type.slice(1);
      this[method](event);
    }

    onMousedown() {
      elem.innerHTML = "마우스 버튼을 눌렀습니다.";
    }

    onMouseup() {
      elem.innerHTML += " 그리고 버튼을 뗐습니다.";
    }
}

elem.addEventListener('onmousedown',obj);
elem.addEventListener('onmouseup',obj);

버블링 & 캡쳐링

버블링

3개의 요소가 form > div > input 으로 중첩되어 있을 때,
각각에 click 이벤트에 대해 핸들러가 할당되어 있습니다.

가장 안쪽의 input을 클릭하면, 어떤 핸들러가 동작할까요?

input부터 div, form의 모든 핸들러가 동작합니다.

이처럼, 이벤트가 발생한 요소의 핸들러가 동작하고,
최상단 요소 까지 과정이 반복하며 요소 각각의 핸들러가 동작합니다.

이러한 과정을 거품과 닮았다 하여 버블링이라고 합니다.
이벤트가 어디서 발생했는지 event.target을 통해 알 수 있습니다.
이벤트가 발생한 요소를 target(타겟)이라고 부릅니다.

this, event.currentTarget은 현재 핸들러가 할당된 요소를 말합니다.
즉, 버블링 과정에서 target의 상위요소에서 동작한 핸들러의 this는 target과 다릅니다.

거의 모든 이벤트는 버블링 됩니다. ( 아닌 경우도 있음 )

버블링 중단

최상단 요소까지 이벤트가 올라가기 때문에, 이벤트를 처리 후에 더이상 버블링이 안되도록 막을 수 있습니다.

event.stopPropagation() 을 사용합니다.

꼭 필요한 경우만 사용하세요
전역적으로 이벤트에 대해 핸들러를 할당하였는데,
어떤 영역에서 버블링을 막는다면 그 영역은 죽은 영역이 됩니다.
커스텀 이벤트 등을 통해 아래쪽에 무슨일이 일어나는지 알릴 수 있습니다.

캡쳐링

버블링 외에도 캡쳐링이라는 흐름이 존재합니다.
버블링과는 반대로 이벤트가 최상단 코드에서 타깃까지 아래로 전파됩니다.

addEventListener의 options에 {capture : true}로 설정하면 캡처링 단계에서 동작합니다.

아까와 같은 중첩구조에서 캡쳐링 단계는 form -> div -> input 순으로 핸들러가 동작합니다.