[javascript] 자바스크립트 함수 이벤트 전파 막기

 

 

안녕하세요!

 

오늘은 자바스크립트 함수를 사용할 때 발생하는 이벤트 중복 현상을 방지하는 방법에 대해 정리해 보려고 합니다. 이벤트 중복은 때때로 웹 개발에서 문제가 발생할 수 있는 상황 중 하나입니다. 이를 방지하기 위해 자바스크립트에서 제공하는 두 가지 기능인 preventDefault와 stopPropagation에 대해 알아보겠습니다.

 

---

이벤트 전파

자바스크립트에서 이벤트 전파란, 웹 페이지의 요소에서 발생한 이벤트가 상위 요소로 전파되는 과정을 말합니다. 이벤트 전파는 크게 두 가지 방식으로 동작하는데, 이를 이벤트 버블링(Event Bubbling)과 이벤트 캡처(Event Capturing)라고 합니다.

 

이벤트 버블링 (Event Bubbling)
    - 이벤트 버블링은 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 현상입니다.
    - 예를 들어, 특정 버튼을 클릭하면 해당 버튼이 속한 상위 요소의 클릭 이벤트도 함께 발생합니다.
    - 이벤트 버블링은 최하위 자식 요소에서 시작해서 최상위 조상 요소까지 이벤트가 전파됩니다.
    - 자바스크립트에서 이벤트 버블링을 이용하면 하위 요소에서 발생한 이벤트를 상위 요소에서도 처리할 수 있습니다.

이벤트 캡처 (Event Capturing)
    - 이벤트 캡처는 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 이벤트가 전파되는 현상입니다.
    - 이벤트 캡처는 최상위 조상 요소에서 시작해서 최하위 자식 요소까지 이벤트가 전파됩니다.
    - 자바스크립트에서 이벤트 캡처를 이용하면 상위 요소에서 발생한 이벤트를 하위 요소에서도 처리할 수 있습니다.

 

 

이벤트 전파는 웹 페이지의 이벤트 처리에 있어서 중요한 개념으로, 이를 잘 이해하고 활용하면 효율적인 이벤트 처리가 가능해집니다.

 

---

preventDefault

자바스크립트의 preventDefault 메서드는 이벤트가 발생했을 때 기본 동작을 막는 데 사용되는 메서드입니다. 즉, 이벤트가 특정 동작을 수행하려고 할 때 그 동작을 취소하는 역할을 합니다. 이를 이용하여 링크의 클릭 동작, 폼의 제출 등 기본적인 동작을 막거나 커스텀 이벤트의 기본 동작을 제어할 수 있습니다.

preventDefault 메서드는 이벤트 객체에 접근하여 호출할 수 있으며, 이벤트 핸들러 내에서 사용됩니다. 이벤트 객체는 일반적으로 이벤트 핸들러의 첫 번째 매개변수로 전달됩니다.

 

 

preventDefault 적용 전 예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    /**
     * 체크박스 cliek event 실행
     */
    document.querySelector('#eventCheck').addEventListener('click', function (event) {
        document.querySelector('#resultContent').textContent = '이벤트 방지 전';
    });
});

</script>
<div>preventDefault</div>
<hr>
<div>
    <input type="checkbox" id="eventCheck"/>이벤트 방지
</div>
<br>
<span id="resultContent"></span>

위의 소스 코드는 자바스크립트를 사용하여 체크박스의 클릭 이벤트를 처리하는 예제입니다.

HTML 영역
<input type="checkbox" id="eventCheck"/>이벤트 방지 체크박스가 있으며, id 속성으로 "eventCheck"라는 아이디를 가지고 있습니다.

JavaScript 영역
#eventCheck 아이디를 가진 체크박스의 클릭 이벤트를 감지하는 리스너가 등록되어 있습니다.
체크박스를 클릭하면 클릭 이벤트가 발생하고, 이 때 리스너 함수가 실행됩니다.
#resultContent 아이디를 가진 요소의 텍스트 내용이 "이벤트 방지 전"으로 변경됩니다.

 

실행 결과

체크 표시되는 체크박스

 

 

preventDefault 적용 후 예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    /**
     * 체크박스 cliek event 실행
     */
    document.querySelector('#eventCheck').addEventListener('click', function (event) {
        // 이벤트 방지 실행
        event.preventDefault();

        document.querySelector('#resultContent').textContent = '이벤트 방지 후';
    });
});

</script>
<div>preventDefault</div>
<hr>
<div>
    <input type="checkbox" id="eventCheck"/>이벤트 방지
</div>
<br>
<span id="resultContent"></span>

 

위의 소스 코드에서 preventDefault() 메서드는 체크박스의 클릭 이벤트에 적용되어 있으며, 해당 메서드를 호출하여 기본 동작인 새로고침을 막습니다. 따라서 체크박스를 클릭해도 페이지가 새로고침되지 않고, "이벤트 방지 후"로 메시지가 출력됩니다. 이렇게 preventDefault() 메서드를 사용하면 이벤트의 기본 동작을 막을 수 있습니다.

 

 

실행 결과

체크 표시가 되지 않는 체크박스

 

---

stopPropagation

stopPropagation() 메서드는 자바스크립트에서 이벤트 버블링을 중단시키는 역할을 합니다. 이벤트 버블링은 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 현상을 말합니다. 예를 들어, 하위 요소의 클릭 이벤트가 발생하면 이 클릭 이벤트는 상위 요소들로 계속 전파되어 상위 요소들의 클릭 이벤트도 실행될 수 있습니다.

stopPropagation() 메서드는 이벤트의 전파를 중단시키는 역할을 하므로, 이 메서드가 호출되면 해당 이벤트는 더 이상 상위 요소로 전파되지 않습니다. 이로 인해 이벤트 중첩 현상을 방지하고 하위 요소에서 발생한 이벤트가 상위 요소까지 영향을 미치지 않게 됩니다.

이 메서드를 사용하는 방법은 간단합니다. 이벤트 핸들러 함수 내에서 event.stopPropagation()를 호출하면 됩니다. 이렇게 하면 해당 이벤트가 상위 요소로 전파되지 않게 되고, 이벤트 중첩 문제를 해결할 수 있습니다.

 

 

stopPropagation 적용 전 예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {

    /**
     * outer div click event
     */
    document.querySelector('.outer_div').addEventListener('click', function (event) {
        let content = document.querySelector('#resultContent');
        content.innerHTML = content.innerHTML + 'outer DIV<br>';
    });

    /**
     * inner div click event
     */
    document.querySelector('.inner_div').addEventListener('click', function (event) {
        let content = document.querySelector('#resultContent');
        content.innerHTML = content.innerHTML + 'inner DIV<br>';
    });
});
</script>

<div>stopPropagation</div>
<hr>
<div>
    <div class="outer-div outer_div">
        <div class="inner-div inner_div"></div>
    </div>
</div>
<br>
<span id="resultContent"></span>

<style>
.outer-div {
    background  : #7cd67c;
    width       : 150px;
    height      : 150px;
}
.inner-div {
    background  : #ffa249;
    width       : 90px;
    height      : 90px;
}
</style>

위의 소스 코드는 stopPropagation() 메서드를 사용하여 이벤트 버블링을 막는 예제입니다.

 

1. outer_div와 inner_div라는 두 개의 <div> 요소가 있습니다. outer_div는 녹색의 배경색을 가지며, inner_div는 주황색의 배경색을 가집니다.

2. outer_div 요소에는 클릭 이벤트 리스너가 등록되어 있습니다. 클릭 이벤트가 발생하면 해당 함수는 "outer DIV"라는 문자열을 #resultContent라는 span 요소에 추가합니다.

3. inner_div 요소에도 클릭 이벤트 리스너가 등록되어 있습니다. 클릭 이벤트가 발생하면 해당 함수는 "inner DIV"라는 문자열을 #resultContent라는 span 요소에 추가합니다.

여기서 주목할 점은 inner_div를 클릭했을 때 이벤트가 상위 요소인 outer_div까지 전파되는 이벤트 버블링 현상입니다.

하지만 이벤트 핸들러 함수 내에 event.stopPropagation()를 추가하여 이벤트 버블링을 중단시킵니다. 이렇게 하면 inner_div를 클릭했을 때 outer_div까지 클릭 이벤트가 전파되지 않습니다.

 

실행 결과

inner div의 이벤트 전파되는 현상

 

 

---

stopPropagation 적용 후 예제 소스 코드

/**
 * inner div click event
 */
document.querySelector('.inner_div').addEventListener('click', function (event) {
    // 이벤트 전파 방지
    event.stopPropagation();

    let content = document.querySelector('#resultContent');
    content.innerHTML = content.innerHTML + 'inner DIV<br>';
});

위의 소스 코드에서 기존의 소스 코드에서 inner_div 요소에 stopPropagation() 함수를 추가하였습니다.
이렇게 하면 이벤트가 더 이상 상위 요소로 전파되지 않고 중단됩니다.

결과적으로, inner_div를 클릭했을 때 이벤트는 더 이상 outer_div로 전파되지 않고 중단됩니다. 따라서 "inner DIV"라는 문자열만 #resultContent에 추가됩니다. 이로 인해 이벤트 중첩이 발생하지 않고, 이벤트 버블링이 방지되는 효과를 얻을 수 있습니다.

 

 

실행 결과

inner div 이벤트 전파 방지

 

 

---

최종 정리

 

오늘은 자바스크립트의 이벤트 전파와 이벤트 전파를 방지하는 기능인 preventDefault와 stopPropagation에 대해 알아보았습니다.

웹 개발을 하다보면 여러 HTML 요소들이 겹치고 이벤트들이 중첩되는 경우가 많이 발생합니다. 하지만 이러한 상황에서도 간단한 방지 기능들을 익히면 업무에서 많은 도움이 될 수 있습니다.

preventDefault는 기본 동작을 중단시켜 원치 않는 동작을 방지하는 데 사용되며, stopPropagation은 이벤트의 상위 요소로의 전파를 막아 이벤트 중첩을 방지하는데 유용합니다. 이러한 기능들을 잘 활용하면 더 나은 사용자 경험과 효율적인 이벤트 처리를 구현할 수 있습니다.

 

감사합니다!