이벤트는 어떤 일이 발생했다는 신호입니다.
예를 들어 DOM의 일부 내장 이벤트는 다음과 같습니다. -
-
클릭 − 포인팅 장치 버튼(ANY 버튼, 곧 기본 버튼만 될 예정)이 요소에서 눌렸다가 해제되었습니다.
-
마우스오버 − 포인팅 장치는 리스너가 연결된 요소나 그 자식 중 하나로 이동됩니다.
-
키업 − 모든 키가 해제됨
-
로드 − 리소스 및 종속 리소스 로드가 완료되었습니다.
−
를 사용하여 자신만의 이벤트를 만들 수 있습니다.new Event('my-event'); dispatchEvent −
를 사용하여 요소에 이러한 이벤트를 전달할 수 있습니다.HTML -
<div id="my-div"></div>
JS -
const myDiv = document.querySelector('#my-div')
myDiv.dispatchEvent(new Event('my-event')); addEventListener −
를 사용하여 이벤트 수신 시 수행할 작업을 정의하기 위해 이벤트 리스너를 추가할 수 있습니다.HTML -
<div id="my-div"></div>
JS -
const myDiv = document.querySelector('#my-div')
myDiv.addEventListener(
// Event for which we want to listen
'my-event',
// Handler Function
(e) => alert('Event fired!')
);
myDiv.dispatchEvent(new Event('my-event')); 위의 코드를 실행하면 my-event 이벤트를 수신할 이벤트 리스너가 div에 연결됩니다. 이 이벤트가 발생하면 콜백 함수를 호출합니다.
이 이벤트를 전달하므로 즉시 실행되고 경고 상자가 표시됩니다.