언제 필요한가
나의 경우엔 테이블 목록을 표시하는데,
목록 중 row를 클릭하는 경우 발생하는 이벤트와 그 row 중 한 cell을 클릭하면 발생하는 이벤트가 달랐다.
row 클릭 시 -> 해당 data를 수정하는 모달 표시
row에 포함된 삭제 버튼 클릭 시 -> 해당 data를 삭제 && (수정 모달 표시 NO)
기존에 사용중인 테이블 컴포넌트에 삭제 기능이 없어, 삭제 기능을 추가하면서 고민하게 되었다.
부모 요소의 클릭 이벤트를 자식 요소에서 작동하지 않게 하는 방법이 필요했다.
stopPropagation() 메서드를 사용하여 이벤트 전파를 중단하기
function childrenClickHandler(e) {
e.stopPropagation();
...
}
모든 이벤트에는 이벤트 객체가 발생한다.
그리고 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.
전달된 이벤트 객체의 메서드 중 Event.stopPropagation() 메서드를 사용하면
현재 이벤트가 캡처링,버블링 단계에서 더 이상 전파되지 않도록 방지한다.
테스트 코드는 여기에 있다.
부모 요소가 클릭되면 alert창이 표시하는데, 자식 요소 이벤트핸들러에서 해당 메서드를 사용하자 표시되지 않았다. 그리고 자신에게만 할당된 이벤트를 실행한다.
코드를 이벤트핸들러의 앞에 써야하나, 뒤에 써야하난 고민했는데
앞에 추가하든 뒤에 추가하든 똑같이 잘 작동했다.
(이는 캡처링이나 버블링이 자신에게 할당된 이벤트 실행문이 끝나고 시작되기 때문인 것 같다.)
다만 Event.preventDefault() 같이 명시적으로 앞에 써주는게 좋을 것 같다.
