투케이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 : 부모의 이벤트 버블링을 막을 수 있습니다 (즉, 해당 클릭된 자식만 이벤트 발생)

*/


 

반응형
Comments