addEventListener

지정한 유형의 이벤트를 이벤트타겟이 수신할 때마다 호출할 함수를 설정한다.

일반적인 이벤트타겟은 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체가 대상이 될 수 있다.

eventTarget.onload = func;
eventTarget.addEventListener( 'load', func );

addEventListener를 사용할때 이점

1. 하나의 이벤트에 여러개의 핸들러를 등록가능
   onload는 오직 1개 핸들러만 등록가능.

2. 핸들러가 캡처링 또는 버블링에 동작해야 하는지 조절할 수 있다.

3. HTML과 SVG요소가 아니어도 이벤트대상이라면 사용할 수 있다.

주의사항

• 타겟에 핸들러가 추가되어있을때 같은 핸들러를 addEventListener로 추가하면 무시된다.

• 리터럴핸들러는 고유한 핸들러기때문에 각각 메모리를 차지하여 가급적 사용하지 않는것이 좋다.

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

listener는 handleEvent메소드를 가진 객체 또는 함수여야 한다.

useCapture 캡쳐링단계에서 발생함을 설정
기본값은 false이므로 버블링단계에서 발생한다.

once 옵션

핸들러가 한번만 동작해야 함을 나타내는 불리언 값입니다.
기본값은 false.

outer.addEventListener('click', onceHandler, {once:true});

passive 옵션

true일 경우, 이 수신기 내에서 preventDefault()를 절대 호출하지 않을 것임을 나타내는 불리언 값입니다.
패시브 수신기로 스크롤 성능 향상을 얻을 수있다.

addEventListener 단점

콜백함수에 매개변수를 전달할 수 없고 리턴값도 없다.

리턴값은 없어도 상관없지만 매개변수를 전달하지 못하는 것은 매우 불편하기 때문에 아래와 같은 방법들이 있으니 참고하자

let btn = document.querySelector('button');

let temp = {
  arg : btn,
  handleEvent(){
    console.log(this.arg);
  }
}

btn?.addEventListener("click", temp );

handleEvent메소드를 가진 객체를 만들고 객체프로퍼티로 전달할 것들을 만들면 된다.