Events 개념
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
기본적으로 이벤트 핸들러를 등록할 수 있는 요소는 EventTarget 를 상속하는 모든 요소이다. 즉 모든 엘리멘트에 이벤트를 등록할 수 있다.
Events 종류
https://developer.mozilla.org/en-US/docs/Web/Events
강제 이벤트 발생
const text = doucment.querySelector('.text');
text.addEventListener('click',()=>{
console.log('clicked');
});
text.dispatchEvent(new Event('click')); // 강제로 이벤트 전달
특정 이벤트가 가지고 있는 값을 보고 싶다면 ? 🤔
우선 테스트 코드를 작성해보자.
input.addEventListener('keypress',(event)=>{
console.log('keypressed');
});
// 여기서 이벤트가 발생했을때 그 이벤트 내에 어떤 데이터를 가지고있는지 확인
위 사진과 같이 확인하고 싶은 코드라인에 브레이크포인트를 걸어준다.
그런 다음 이벤트를 발생시켜보면, 브레이크 포인트에서 코드가 멈추게 된다.
Watch 탭에서 event를 검색해보면, 어떤 키가 눌러진건지, 알수 있다 🙂
input.addEventListener('keypress',(event)=>{
console.log('keypressed');
if(event.key === 'Enter'){
addItem(); // Enter키 입력시 함수 호출
}
});
위와 같이 특정한 키가 눌러졌을때, 로직이 실행되게끔 처리할 수 있다.
