[이벤트 버블링]
이벤트 버블링이란? 자식에서 부모로 이벤트가 전파되는 행위를 이벤트 버블링 이라고 한다.
자식을 클릭했지만 부모에서 설정한 onClick 이벤트가 실행이 되는 것을 볼 수있다. 이것이 바로 이벤트 버블링 이라고 한다.
이벤트 버블링과 캡처링이 있지만, 주로 캡처링은 많이 사용하지 않는다.
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent);
});
function logEvent(event) {
console.log(event.currentTarget.className);
}위 코드는 각각의 div에 onClick 이벤트를 걸어놓고 이벤트를 실행 시키는 코드이다.
여기서 가장 안쪽의 three DIV 부분을 클릭하게 되면 차례대로 three->two->one 의 순서로 콘솔 로그가 찍히는것을 확인 할 수있다.
이런 이유는 이벤트 버블링 때문이다.
가장 안쪽에서 부터 이벤트가 실행되면 가장 부모 쪽까지 모든 이벤트가 아래서 위로 순차적으로 실행된다.
[event.currentTarget 과 event.target 의 차이점]
event.currentTarget은 해당 이벤트가 터진 지점에서의 타겟만을 가져온다.
즉 클릭 이벤트가 걸려있는 요소를 반환한다고 생각하면 된다.
따라서 이벤트 버블링으로 인해서 제대로된 id를 못가져오는 이슈를 해결할 수 있다.
event.target은 해당 이벤트가 터진 지점에서가 아니라 자식요소가 클릭 되면 자식요소를 반환한다.
즉 클릭 이벤트가 부모요소에 걸려있어도, 무조건 진짜로 클릭 되는 요소가 반환된다는 뜻이다.
프론트엔드 개발 지망생 민범기입니다^^