키보드 이벤트 리스너는 document에서 전체적으로 관리한다. 익명함수에도 e 등 파라미터를 넣어 줄 수 있다. 모달 닫기 전, 꼭 현재 상태를 확인한 뒤 모달을 닫거나 다른 작업들을 처리해 주는것이 중요하다. document.addEventListener('keydown', function (e) { if (e.key == 'Escape' && !modal.classList.contains('hidden')) { // esc 키 눌렀을때, modal 에 hidden 이 없을 경우에 hiddenModal(); // SOMETHING TO DO.. } else if (e.key == 'Enter') {// 엔터키 눌렀을 때 hiddenModal(); // SOMETHING TO DO... } });
모달
버튼이 3개 있을 때, 버튼 세개에 전부 클릭 이벤트를 주고자 한다면 반복문을 이용해서 처리해 줄 수 있다. app.js const showModal = document.querySelectorAll('.show-modal'); const modal = document.querySelector('.modal'); const closeBtn = document.querySelector('.close-modal'); const overlay = document.querySelector('.overlay'); for (let i = 0; i < 3; i++) { showModal[i].addEventListener('click', function () { modal.classList.remove('hidden..