프론트 118 - stop propatation

규링규링규리링·2024년 9월 22일

프론트 공부하기

목록 보기
118/135

stop propatation

이벤트 버블링을 통해서 자식에서 부모로 이벤트가 전파되었는데
이벤트 전파를 중단시키는 방법에 대해 알아보자.

부모안의 수많은 자식중 일부는 자신들만의 onClick기능을 사용하고 싶은데
이벤트 버블링 때문에 자식과 부모의 기능이 모두 동작되게된다.
자식의 기능만 할 수 있는 방법이 있을까

이런식으로 작성을 하면
a4를 실행하고 싶어도 a1도 같이 실행되며
체크박스를 누르면 a1,a2,a3 모두 실행된다.

event.stopPropagation()

이 때 사용하는 방법이 event.stopPropagation() 이다.

이런식으로 a3 내부에 작성하면
해당 내용은 a3만 동작하고 멈추게됨.

만약 파일을 나누어서 작성을 하더라도
이벤트 버블링은 똑같이 발생하므로 event.stopPropagation()를 잊지않도록 하자.

0개의 댓글