군붕이의 메모장

event.preventDefault() 와 event.stopPropagation() 본문

프로그래밍 언어/자바스크립트

event.preventDefault() 와 event.stopPropagation()

초보군붕이 2021. 7. 8. 19:33
반응형

● event.preventDefault()

HTML 에서 a, submit 태그 등 고유한 동작을 가지고있다.

 

a 태그의 경우 태그를 누르게되면 특정 경로로 이동하게 되고, submit 의 경우 form input 안에 데이터를 전송한다.

 

이러한 특정 동작을 막을때 event.preventDefault() 메소드를 사용한다.

 

# <a href="" > 태그

 

<body>
    <a href="https://google.com">구글로 이동</a>
</body>

구글로 이동되는 모습

 

 

 

이때 event.preventDefault() 태그를 사용하여 이동하는것을 막아보겠다.

<body>
    <a href="https://google.com">구글로 이동</a>
    <script> 
        const aTag = document.querySelector('a');
        aTag.addEventListener('click', e => {
            e.preventDefault() // 이벤트 차단
            console.log('구글로 이동하는 a태그를 클릭했습니다.')
        })
    </script>
</body>

a 태그를 클릭해도 이벤트가 실행되지 않는다.

a 태그 클릭

 

# <button type="submit" > 태그

<body>
    <form method="POST">
        <label for="">2 + 2 = ?</label><br>
        <input type="text" name="" id="">
        <button type="submit" class="submit-btn">전송</button>
    </form>
    <script>
        const submitBtn = document.querySelector('.submit-btn');
        const result = document.querySelector('input');
        submitBtn.addEventListener('click', (e) => {
            console.log("입력하신 답은 " + result.value + " 입니다.")
        })
    </script>
</body>

form 태그를 이용하여 전송 버튼을 누를경우 입력한 답이 출력되는 코드를 작성했다.

바로 사라지는 값???

submit 을 누르게 되면 0.1 초 정도 값이 보이고 바로 사라져 버린다. 이 때 event.preventDefault() 를 사용하여 이를 방지할 수 있다.

 

<body>
    <form method="POST">
        <label for="">2 + 2 = ?</label><br>
        <input type="text" name="" id="">
        <button type="submit" class="submit-btn">전송</button>
    </form>
    <script>
        const submitBtn = document.querySelector('.submit-btn');
        const result = document.querySelector('input');
        submitBtn.addEventListener('click', (e) => {
            e.preventDefault()
            console.log("입력하신 답은 " + result.value + " 입니다.")
        })
    </script>
</body>

 

값이 남아있는 화면

 

 

 

● event.stopPropagation()

event.stopPropagation() 은 특정 요소에 이벤트가 발생했을때 상위 요소들로 전달되는 현상을 방지해준다.

이 현상을 이벤트 버블링(Event Bubbling) 이라고 한다.

<body>
    <div class="div1">
        div1
        <div class="div2">
            div2
            <div class="div3">div3</div>
        </div>
    </div>
    <script>
        function clickEvent(event) {
            console.log(event.currentTarget.className)
        };

        const divs = document.querySelectorAll('div');
        divs.forEach(div => {
            div.addEventListener('click', clickEvent)
        });
    </script>
</body>

 

# div3, div2, div1 을 각각 클릭시

 

  • div3 클릭 : div3 -> div2 -> div1
  • div2 클릭 : div2 -> div1
  • div1 클릭 : div1

 

위 순서처럼 상위 태그로 이벤트가 전파됨을 확인할 수 있다.

 

event.stopPropagation() 을 적용하고 한번더 테스트 해봤다.

 

<body>
    <div class="div1">
        div1
        <div class="div2">
            div2
            <div class="div3">div3</div>
        </div>
    </div>
    <script>
        function clickEvent(event) {
            event.stopPropagation()
            console.log(event.currentTarget.className)
        };

        const divs = document.querySelectorAll('div');
        divs.forEach(div => {
            div.addEventListener('click', clickEvent)
        });
    </script>
</body>

clickEvent 함수에서 event 객체에 대해서 event.stopPropagation() 을 적용했다.

이벤트 버블링 현상이 제거된 결과

 

반응형
저작자표시

'프로그래밍 언어 > 자바스크립트' 카테고리의 다른 글

자바스크립트 this 바인딩에 대한 이야기  (0) 2023.05.19
자바스크립트 변수와 호이스팅  (0) 2023.05.18
자바스크립트로 Image Upload 및 Preview 구현하기  (11) 2022.01.08
'프로그래밍 언어/자바스크립트' Related Articles more