투케이2K

118. (javascript/자바스크립트) event.stopPropagation 사용해 버블링 이벤트 방지 실시 - 중복 이벤트 발생 막기 본문

JavaScript

118. (javascript/자바스크립트) event.stopPropagation 사용해 버블링 이벤트 방지 실시 - 중복 이벤트 발생 막기

투케이2K 2021. 9. 12. 09:45
반응형

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : javascript

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

    <!-- 내부 JS 지정 : 일반 -->
    <script>

        /*
        [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();
        };
                
    </script>

​

 

[BODY 소스코드]

<body>

<!-- parent layout -->
<div id = "parent_container"
    style = "width: 70%; height: 40%; margin: 0 auto; padding: 0; background-color: #0000ff; 
        position: relative; top: 5%; left: 0%; display: table;"
    onclick="parentClick();">

        <!-- child layout -->
        <div id = "child_container"
            style = "width: 40%; height: 60%; margin: 0; padding: 0; background-color: #ff00ff; 
                float : top; position: relative; top: 20%; left: 10%; display: table;"
            onclick = "childClick(event);">            
        </div>        
        
</div>

</body>

[결과 출력]

​

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

​

​

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

[요약 설명]

​

/*

[JS 요약 설명]

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

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

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

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

*/

 

반응형
저작자표시

'JavaScript' 카테고리의 다른 글

120. (javascript/자바스크립트) a 태그 download 사용해 캔버스 canvas 이미지 파일 저장 실시  (0) 2021.09.15
119. (javascript/자바스크립트) scrollTop 사용해 특정 객체 top , bottom 위치 스크롤 이동 실시  (0) 2021.09.12
117. (javascript/자바스크립트) 안드로이드 : 카카오 인앱 브라우저에서 크롬 브라우저로 이동 실시  (4) 2021.09.02
116. (javascript/자바스크립트) window keyup 이벤트 사용해 실시간 텍스트 text 입력 글자 수 확인 실시  (0) 2021.08.31
115. (javascript/자바스크립트) findIndex 사용해 특정 JSON KEY 값을 포함하는 데이터 확인 실시 - new Object , new Array  (0) 2021.08.27
'JavaScript' Related Articles more
Comments