1. 버블링
자식요소에 이벤트를 발생시키면, 상위의 부모요소의 이벤트도 같이 발생하는 것이 이벤트 버블링이다.
<script>
const onClickOne = () => {
alert("ONE")
}
const onClickTwo = () => {
alert("TWO")
}
const onClickThree = () => {
alert("THREE")
}
</script>
<style>
.one {
width: 300px;
height: 300px;
background: yellow;
cursor: pointer
}
.two {
width: 200px;
height: 200px;
background: orange;
cursor: pointer
}
.three {
width: 100px;
height: 100px;
background: red;
cursor: pointer
}
</style>
<body>
<div class="one" onclick="onClickOne()">
<div class="two" onclick="onClickTwo()">
<div class="three" onclick="onClickThree()">
</div>
</div>
</div>
</body>위와 같은 예제에서 가장 하위 자식 요소인 three 클래스를 가진 요소를 클릭했을 때 이벤트 버블링으로 인해 상위의 부모 요소들이 전부 차례대로 실행이 된다.
- 버블링 중단하기
이러한 이벤트 버블링을 중단하는 2가지의 방법이 있다.
const onClick = (event: MouseEvent<HTMLDivElement>) => {
if (event.target instanceof Element)
alert(event.target.id + "님이 작성한 글입니다.");
};
return (
<div>
{data?.fetchBoards?.map((el) => (
<div onClick={onClick} id={el.writer ?? ""}>
<span>{el.number}</span>
<span>{el.title}</span>
<span>{el.writer}</span>
</div>
))}
</div>
);
- event.target.id를 event.currentTarget.id로 바꿔 해결한다.
- 이벤트 객체의 메서드인 event.stopPropagation()를 사용하여 해결한다.
2. 캡쳐링
캡쳐링은 버블링의 반대로 상위 부모요소부터 최하위 자식요소까지 전파되는 것이다.
- false이면(default 값) 핸들러는 버블링 단계에서 동작합니다.
- true이면 핸들러는 캡처링 단계에서 동작합니다.
캡처링 단계를 이용해야 하는 경우는 흔치 않기 때문에 캡처링에 관한 코드를 발견하는 일은 거의 없지만, 발생하게 된다면 이벤트 핸들링을 해줘야 할 수 있기 때문에 기억하고 있어야 겠다.
나의 개발 지식 저장소