addEventListener

지정된 EventTarget이벤트가 대상에 전달될 때마다 호출되는 함수를 설정

메서드 방법

• 일반적인 대상 : Element
• 자식 : Document, Window,
• 이벤트를 지원하는 모든 객체 : IDBRequest

• 핸들러를 여러 개 할당해서 HTML 속성, DOM 프러퍼티에서 하나 이벤트에 복수 핸들러 할당이 안 되는 문제점 해결
• 삭제는 동일한 함수에서만 가능하다

addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

• type : 수신할 이벤트 유형, 대소문자 구분하는 문자열
• listener : Event 지정된 유형 이벤트가 발생할 때 알림 받는 객체
• options(선택) : 이벤트 리스너에 대한 특성을 지정하는 객체
  • capture : DOM 트리에서 그 아래에 있는 listener 어떤 것으로 전송되기 전에 등록된 것으로 전송됨을 나타내는 부울 값, 지정되지 않으면 EventTarget false 기본값
  • once : listener 추가된 후 최대 한번 호출 부울값, 기본값(false)
  • passive : true에서 listener 호출하지 않음을 나타낸다.
  • preventDefault() : 아무 일도 일어나지 않으며 콘솔 경과 생성될 수 있다.
  • signal : 소유한 메서드가 호출될 AbortSignal 때 제거된다.
• useCapture(선택) : DOM 트리에서 아래에 있는 이벤트로 전송되기 listener 전에 이 유형의 이벤트가 등록된 이벤트로 전송되는지 여부를 나타내는 부울 값 EventTarget

1️⃣ 이벤트 핸들러는 3가지 방법으로 할당 가능

1. HTML 속성: onclick="...".
2. DOM 프로퍼티: elem.onclick = function.
3. 메서드: elem.addEventListener(event, handler[, phase])로 핸들러를 추가하고, removeEventListener 로 핸들러를 제거함

✔️HTML은 속성, DOM은 프로퍼티라고 하는 이유?

HTML 속성 : 인수로 element가 가지고 있는 것을 의미
코드가 길어지면 함수를 만들어서 호출하는 방법 추천

<input value="abc" />
// attribute는 value="abc"

// onclick 속성에 click 핸들러 할당
<input value="클릭해 주세요." onclick="alert('클릭!')" type="button">

<script>
  function countRabbits() {
    for(let i=1; i<=3; i++) {
      alert(`토끼 ${i}마리`);
    }
  }
</script>
<input type="button" onclick="countRabbits()" value="토끼를 세봅시다!">

• 정적인 속성
• 특성은 항상 name=”value” 의 형태
• 대소문자 구분하지 않는다
  
  
  DOM 프로퍼티 : 생성된 함수 DOM 프로퍼티에 할당
• 동적인 속성
• html dom tree안에 있고, javascript에 의해 생성되고 조작된다
• 대소문자 구분한다
  https://developer.mozilla.org/ko/docs/Glossary/Attribute

2️⃣ 켭처링 단계, 타깃 단계, 버블링 단계

DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계
= 이벤트 전파(Event Propagation)
+event.eventPhase : 현재 이벤트 흐름 단계(1,2,3)
1. 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계
3. 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계



✔️캡처링
최상위에서 아래로 전파되는 과정


✔️버블링
한 요소 이벤트가 발생하면, 부모 요소 핸들러도 동작
가장 최상단 조상 요소 만날 때까지 과정 반복(심지어 몇몇 이벤트는 window객체까지 거슬러 올라간다)
요소 각각 할당된 핸들러가 동작

• event.stopPropagation() 쓰면 버블링 중단
  꼭 필요한 경우를 제외하곤 버블링을 막지 말기
  
  

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>
<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

알림창이 p, div, form 3번 나온다
→ 이벤트 버블링이라고 부른다


❗️거의 모든 이벤트가 버블링 된다
focus 이벤트와 같이 버블링 안 되는 이벤트도 있다
하지만 대부분은 버블링이 된다