JavaScript Bubbling 이란? 자바스크립트 이벤트 버블링(Event Bubbling)은 HTML 요소들이 중첩되어 있을 때, 해당 요소에서 발생한 이벤트가 부모 요소들로 전파되는 현상을 말한다. 이벤트가 발생한 요소에서 시작하여 최상위 부모 요소까지 이벤트가 전파되는 것을 의마한다. 예를 들어 아래와 같은 HTML 구조가 있다고 가정하면 클릭 버튼을 클릭하면 버튼에서 클릭 이벤트가 발생한다 여기서 이벤트는 버튼에만 적용되는것이 아니라, 버튼을 포함하는 부모 요소들에게도 전파된다, 따라서 클릭 이벤트가 버튼에서 발생하면 순서대로 " inner ", " outer " 요소 들에게도 이벤트가 전파되는 것이 이벤트 버블링이다. 이벤트 버블링을 이해하면, 이벤트를 캡처링(Capturing) 단계와 버..
HTML 팝업 열기 팝업창 내용 팝업창 내용을 입력하세요. 닫기 HTML 파일에는 팝업창을 나타내기 위한 요소와 팝업창을 표시할 버튼을 만들며 일반적으로는 팝업창을 감싸는 컨테이너 요소와 팝업창 내용을 담는 요소를 포함한다. CSS .popup-container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 9999; align-items: center; justify-content: center; } .popup-content { background-color: #fff; padding: 20px; border-radius: 8..
Event Header Component에서 onChangeMode props의 값으로 function를 전달한다. Header를 클릭했을떄 함수를 실행하고 싶을때 사용한다. 앵커태그에 onClick 이벤트를 걸어주면 앵커태그를 클릭했을때 function을 호출한다. 그리고 앵커태그를 클릭했을때 페이지 이동을 막을려면 onClick에 콜백함수로 들어간 함수가 호출될때 event 객체를 첫번째 파라미터로 주입해준다. event.preventDefault();로 앵커태그의 기본 동작을 방지한다. 그다음 props로 보내준 onChangeMode를 호출한다. Nav Component를 클릭했을때 id 1, 2, 3 별로 1, 2, 3이라는 alert을 띄우고 싶으면 Nav Component는 onChangeM..
