*작성일 2023-03-20*

[목차]

<aside> ❓ jQuery로 작성된 코드를 바닐라 JS로 바꿔보던 중, addEventListener를 사용할 때 event를 작성하면 취소선이 그어지는 이유나, 해당 코드 그 자체는 어떤 내용인지 궁금해졌다.

</aside>

EventTarget.addEventListener()

• addEventListener 메서드를 이용해 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정할 수 있다.
• useCapture의 기본값은 false다.
• 이 함수 방식은 이전 방식에 비해 보다 나은 장점을 갖는다.
  1. 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있다.
  2. 캡처링과 버블링을 지원한다.
  3. HTML 요소뿐만 아니라 DOM 모든 요소(HTML, XML, SVG)에 대해 동작한다. 브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM을 생성한다.

하나씩 콘솔 찍어보기

<!-- html -->
<button class="button use-class">웹개발 플러스</button>

1. event