버튼을 클릭하면 bubbling up이 되어 middle, outer까지 클릭 이벤트가 실행됨.
event.stopPropagation();
event.stopImmediatePropagation();
이 두개는 되도록 사용하지 말것!
해당 버튼을 참고하고 있는 모든 리스너를 무시하게 됨.
우리가 모르는 코드가 있을 수 있으므로 매우 위험(프로젝트 규모가 커지면, 예상하지 못한 오류 발생 가능성 높음)
how??
해당되는 모든 부모에서
if(event.target !== event.currentTarget){
return;
}
이 함수를 넣어줌.
=====
event.preventDefault();
모든 함수를 처리하고-> 체크박스 체크표시
active event listener
브라우저는 우리가 설정한 행동 이후에 기본설정된 행동을 함
passive event listener
스크롤링에 관련된것 처럼 빠르게 동작해야 하는것은
브라우저가 하는 행동이 우선시됨.
이건 preventDefault불가능
passive를 해제하면 가능함.(권장하지 않음)
document.addEventListener('wheel', event => {
console.log('scrolling');
event.preventDefault();
},
{passive: false}
);
