[js] 이벤트 리스너

이벤트 리스너란?

- DOM 요소에서 발생하는 이벤트를 감지하고, 해당 이벤트가 발생할 때 자동으로 실행하는 함수
- 이벤트 핸들러랑 거의 동일
// 이벤트 핸들러와 다른점
-> addEventLIstener() 매서드를 사용하여 이벤트 리스너를 등록
-> 여러개 등록시 모든 이벤트 리스너가 유효

요소.addEventListener(event, callback, useCapture);
e.g. element.addEventListener
- event: 감지하고자 하는 이벤트의 종류 (ex: 'click', 'keydown', 'submit') -> 이벤트 핸들러에서 on을 빼면 됨
- callback: 이벤트가 발생했을 때 호출될 함수
- useCapture: 이벤트 캡쳐링 여부 (true 이면 캡쳐링,  false이면 버블링), 기본값 = false

1. 클릭 이벤트 (click)

<button id="myButton">클릭하세요</button>

<script>
    const button = document.getElementById('myButton');
    button.addEventListener('click', function(){
      alert('클릭됨');
    });
</script>