Written by java-style
on 2021-09-12

118. (javascript/자바스크립트) event.stopPropagation 사용해 버블링...

728x90

반응형

[개발 환경 설정]

개발 툴 : Edit++

개발 언어 : javascript

[자바스크립트 소스코드]

/* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. 버블링 이벤트 : 이벤트가 전파가 자식에서 부모로 이동하는 것을 의미합니다 3. 자식 클릭 시 : 버블링 이벤트가 발생해 [자식 클릭 이벤트 발생 >> 부모 이벤트 발생]이 연쇄적으로 발생합니다 4. event.stopPropagation : 부모의 이벤트 버블링을 막을 수 있습니다 (즉, 해당 클릭된 자식만 이벤트 발생) */ /* [html 최초 로드 및 이벤트 상시 대기 실시] */ window.onload = function() { console.log(""); console.log("[window onload] : [start]"); console.log(""); }; /* [부모 클릭 이벤트 함수 정의] */ function parentClick(){ console.log(""); console.log("[parentClick] : [start]"); console.log(""); }; /* [자식 클릭 이벤트 함수 정의] */ function childClick(event){ console.log(""); console.log("[childClick] : [start]"); console.log(""); // [상위 이벤트 발생 막기] event.stopPropagation(); };

[BODY 소스코드]

[결과 출력]

[버블링 이벤트 막기 (전) - 자식 클릭]

[버블링 이벤트 막은 (후) - 자식 클릭]

[요약 설명]

[JS 요약 설명]

1. window.onload : 브라우저 로드 완료 상태를 나타냅니다

2. 버블링 이벤트 : 이벤트가 전파가 자식에서 부모로 이동하는 것을 의미합니다

3. 자식 클릭 시 : 버블링 이벤트가 발생해 [자식 클릭 이벤트 발생 >> 부모 이벤트 발생]이 연쇄적으로 발생합니다

4. event.stopPropagation : 부모의 이벤트 버블링을 막을 수 있습니다 (즉, 해당 클릭된 자식만 이벤트 발생)

728x90

반응형

from http://kkh0977.tistory.com/1205 by ccl(A) rewrite - 2021-09-12 11:01:36

Top