[1일1js] 이벤트 버블링 및 캡처

Lee Tae-Sung·2021년 7월 31일
0

JS

목록 보기
24/56
post-thumbnail

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture

=> 해당 페이지만으로 이해가 안가 상세히 설명한 페이지를 찾았다.

유튜브로도 종종 보고 있는 캡틴판교님의 블로그 글

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

이벤트 버블링

위의 링크 블로그에 자세히 설명이 되어 있는데
내 말로 풀러 정리하자면

=> 하위 div를 작동시켰을때 상위 태그들로 전달되어 작동하는 것이다.

=> 하나의 태그를 특정해 지정하지 않고 All로 모든 div를 가져와 이용했을때 발생했다.

=> 이 경우에만 작동하는지는 모르겠음 .

이벤트 캡쳐

addEventListener() API에서 옵션 객체에 capture:true를 설정해주면 됩니다. 그러면 해당 이벤트를 감지하기 위해 이벤트 버블링과 반대 방향으로 탐색합니다.

var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', logEvent, {
		capture: true // default 값은 false입니다.
	});
});

function logEvent(event) {
	console.log(event.currentTarget.className);
}

event.stopPropagation()

function logEvent(event) {
	event.stopPropagation();
	console.log(event.currentTarget.className); // three
}

=> 다음의 코드로 강제로 버블과 캡쳐를 중지 시킬 수 있다.

다음은 이벤트 위임

profile
긍정적인 에너지를 가진 개발자, 이태성입니다.

0개의 댓글