[vue3] 이벤트 버블링 이란?

● 버블링 이란?

TodoList.vue

<template>

    <div v-for="(item,index) in todos" :key="index"  class="card mt-2">

        <div

            class="card-body p-2 d-flex align-items-center"

            @click="moveToPage(item.id)"

        >

            <div class="form-check flex-grow-1">

                <input

                    class="form-check-input"

                    type="checkbox"  

                    :checked="item.completed"

                    @change="toggleTodo(index)"

                    :id="index"

                />

                <label

                    class="form-check-label"

                    :style="item.completed ? todoStyle :{}"

                    :class="{ 'todo': item.completed }"

                    :for="index"

                >

                    {{item.subject}}

                </label>

            </div>

            <div>

                <button

                class="btn btn-danger btn-sm"

                @click="deleteTodo(index)"

                >

                Delete

                </button>

            </div>

        </div>

    </div>

</template>

 

=> deleteTodo를 클릭시 이벤트가 동작 하지만 @click="moveToPage(item.id)"의 이벤트도 동작한다.

?

왜냐하면 이벤트 버블링 때문이다,

deleteTodo(index)의 이벤트가 부모(html까지)에 있는 이벤트까지 전파시키기 때문이다.

vue의 경우 => @click.stop = ""

js 의 경우 => evnet.stopPropagation()

을 사용하면 된다.