본문 바로가기

자바스크립트 이벤트리스너2

[ JavaScript ] 자바스크립트 기본 문법 | 이벤트 전파(버블링과 캡쳐링) 해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 자바스크립트 기본 문법 : 이벤트 전파 - 캡처링(Capturing) HTML 태그는 중첩되어 있습니다. 따라서 특정한 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 되는 경우가 생깁니다. 이런 경우에, 중첩된 ㅌ내그들에 이벤트가 등록되어 있다면 어떻게 처리될까요? 어떤 태그부터 이벤트가 실행될까요? 예시로 살펴보도록 하겠습니다. event propagation 위의 예제 코드에서, 제일 안쪽에 존재하는 id 가 target 인 버튼을 눌러보도록 하겠습니다. 이벤트가 부모에서부터 발생해서 자식으로 전파되고 있는 것을 확인할 수 있습니다. 이러한 방식을 capturing이라고 합니다. i.. 2021. 2. 9.
[ JavaScript ] 자바스크립트 기본 문법 | 이벤트리스너(addEventListener, 클릭 이벤트) 해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 자바스크립트 기본 문법 :: 이벤트(Event)란? 이벤트(event)는 어떤 사건을 의미합니다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미합니다. onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행됩니다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 됩니다. 이러한 방식을 이벤트 프로그래밍이라고 합니다. event target target은 이벤트가 일어날 객.. 2021. 2. 9.