[JS] 이벤트버블링

[JS] 이벤트버블링

이벤트 버블링현상이란?

이벤트가 상위요소로 퍼지는 현상을 말한다.

Sign in 이메일을 입력해주세요 이메일 형식을 제대로 입력해주세요. 비밀번호를 입력해주세요 전송 Close

//검은 배경 누르면 모달창이 닫히는 기능 //jQuery $(".black-background").click(() => { $(".black-background").hide(); });

예를 들어 위 코드를 보면

log in 버튼을 누르고 나서 로그인 칸 또는 검은색 배경화면을 외에 어떠한 것들을 클릭해도 화면이 닫힌다.

왜냐하면 'black-background'에 이벤트를 준 걸 브라우저는 input을 클릭 시 input의 상위요소들도 클릭한 것으로 인식하기 때문이다.

그래서 브라우저에게 명령을 내릴 때 좀 더 구체적으로 말해줘야할 필요가 있다.

//이벤트 버블링을 막기위한 방법 e.target //지금 실제로 클릭한 요소 e.currentTarget //지금 이벤트리스너가 달린 곳 e.preventDefault();//기본동작 막기 $(".black-background").click((e) => { //만약에, 지금 실제로 클릭한 게 검은 배경일 때만 //방법1 let target = $(e.target); console.log(target); if (target.is(".black-background")) { target.hide(); } //방법2 if (e.target === e.currentTarget) { $(".black-background").hide(); } });

혹여나 다음과 같이 입력하는 경우를 주의하자.

if(e.target === $('.black-background')) { $('.black-background').hide(); }

위와 같이 입력을 하면 e.target(순수자바스크립트) === $('.black-background') (제이쿼리)를 필요하는 것으로

해당 코드는 동작하지 않는다. 그러므로 무조건 같은 종류(자바스크립트끼리 혹은 제이쿼리끼리 )를 묶어서 비교를 해야한다.

from http://codingbucks.tistory.com/126 by ccl(A) rewrite - 2021-11-22 18:27:42