강의

멘토링

커뮤니티

Inflearn Community Q&A

re1ee's profile image
re1ee

asked

Learn pure javascript and VueJS development through hands-on UI development

Recent searches (Implementation)

질문이 있어요. stop

Written on

·

226

1

<div v-if="history.length">

<ul class="list">

<li v-for="item in history" v-on:click="onClickKeyword(item.keyword)">

<span>{{item.keyword}}</span>

<span class="date">{{item.date}}</span>

<button class="btn-remove" v-on:click.stop="onClickRemoveHistory(item.keyword)"></button>

</li>

</ul>

</div>

    최근 검색어를 출력하는 부분인데요. click이벤트 stop을 왜 button에다 걸었는지 궁금하네요 위에 li 태그에 걸줄 알았는데, event bubbling을 li에서 멈춰줘야 하는거 아닌가 싶어서...propagation 동작을 제가 정확히 이해하지 못해서 그런거 같은데 자세한 설명 부탁드립니다!
vuejsjavascript

Answer 1

0

event가 발생하는 타겟이 버튼이기 때문입니다.

버블링을 버튼에서 멈춰줘야 li에서의 이벤트가 일어나지 않으니까요.

 

이벤트 버블링에 대해서 구글 검색을 해보시면 그림과 함께 보다 보시면 이해가 되시리라 사려됩니다.

re1ee's profile image
re1ee

asked

Ask a question