화면분기와 액션함수

안녕하세요~ 답변 감사드립니다. 올려주신 답글과 함께..장황하지만 제가 이해한 내용을 다시한번 확인받아도 되는지요? 문제. 브라우저에서 동작하는 (1)자바스크립트와 (2)Svelte의 반응성으로 나타나는 하나의 '현상'. 처음 isEditMode 가 false 일때 이벤트가 발생되면 button -> ......-> window 까지 버블링이되어 올라가는 동시에 (javascript) isEditMode 가 true 일때 요소가 생성이 되면서 액션 함수가 실행(svelte 반응성)되어 집니다. 여기서 문제는 액션함수 실행으로인해 연결된 두가지 이벤트 리스너들이 동작하게 되는데 먼저 el에 연결된 focousinListener 자체는 autuFocustout 이 연결된 요소자체에 바인딩이되어 여기선 실행되어지지 않고 window 에 바인딩된 이벤트만 발생합니다. 따라서 isEditMode 가 false 임에도 불구하고 window에 연결된 핸들러 focusoutListener(offEditMode)가 실행되면서 isEditMode는 false가 됩니다. 해결. setTimeout 을 통해 이벤트리스너들을 나중에 호출하자. setTimeout(() => { el.addEventListener('click', focusinListener); window.addEventListener('click', focusoutListener); }, 0); 우선 setTimeout() 을 통해서 setTimeout 안의 콜백함수가 먼저 콜 스택이아닌 백그라운드로 보내지게 하고 0 초후에 테스트큐로 보내집니다. 후에 이벤트 루프로 콜스택에있는 모든 함수가 실행된후에 테스트큐에있던 이벤트 리스너가 콜스택으로 보내진후에 동작한다고 이해 했습니다. 이로서 기존 콜스택에있는것을 모두 호출한 뒤에 나중에 이벤트핸들러들을 실행할수 있게됩니다. 다시말해 앞서 문제가 되었던 자바스크립트와 스벨트의 반응성으로 나타나는 현상을 분리는 시킨건데요. 정확하게 어떤것이 콜스택에 쌓이는지는 가늠이 안가지만.. 대략적으로 개념은 이렇다고 보는데요.. 제대로 이해한건지 강사님의 의견을 듣고 싶습니다. 읽어주셔서 감사합니다. 감사합니다!