프론트엔드2 [JavaScript] 이벤트 버블링과 캡처링 개요차세대 프로젝트에서 제이쿼리를 이용하여 프론트엔드 개발 중, 의도치 않은 이벤트 중첩으로 인해 알람창이 중복으로 뜨는 등의 문제를 경험한 적이 있다. 처음에는 이런 현상이 왜 발생하는지 몰랐는데, 알고 보니 자바스크립트의 이벤트 흐름인 버블링과 캡처링 개념을 제대로 이해하지 못했기 때문이었다. 이번 글에서는 이 두 가지 개념을 쉽게 설명하고자 한다. 이벤트 버블링이란?이벤트 버블링(Event Bubbling)은 자바스크립트에서 이벤트가 발생한 자식 요소에서 시작해 부모 요소로 전파되는 방식이다. 물 속에서 발생한 기포 방울(Bubble)이 아래에서 위로 올라가는 이미지를 연상하면 쉽다. 즉, 가장 구체적인 요소에서 이벤트가 발생하면 그 이벤트가 상위 요소들로 차례차례 전달된다. 예를 들어, 안에 있.. 2024. 9. 26. [JavaScript] 자바스크립트에서의 객체 비교 방법 (=== vs ==) 개요자바스크립트를 사용하다 보면 객체를 비교하는 상황을 자주 마주하게 된다. 그때마다 ===와 ==를 사용하면서 혼란스러울 때가 많았다. 겉보기에는 똑같아 보이지만 두 연산자의 작동 방식이 다르기 때문이다. 특히 객체 비교에서 이 차이는 더욱 두드러지게 나타난다. 그래서 이 개념을 정리하고, 다른 개발자들과 공유하고자 한다. ===와 ==의 차이점 자바스크립트에서 ==는 느슨한 동등 비교, ===는 엄격한 동등 비교라고 부른다. 차이점은 ==는 비교할 때 데이터 타입을 자동으로 변환해 동등 여부를 판단하지만, ===는 타입 변환 없이 값과 타입이 모두 일치해야 true를 반환한다.console.log(2 == '2'); // true, 타입 변환 발생console.log(2 === '2'); // f.. 2024. 9. 23. 이전 1 다음
