Javascript Event

이벤트는 전파를 타는데 자식이 이벤트를 실행시키면은, 함수가 끝나고 감싼 부모중에 같은 이벤트를 가진 부모의 이벤트는 실행이 됨.
이것을 막기 위해 e.preventDefault(), e.stopPropagation() 를 이벤트가 실행되는 자식 함수에 넣어줘야 함.
e.preventDefault는 고유 동작을 중단시키고, e.stopPropagation 는 상위 엘리먼트들로의 이벤트 전파를 중단

이벤트를 한번만 실행 할 때는 button.addEventListener('click', 콜백함수,{once:true});로 해주면됨. 이벤트리스너함수에는 여러가지 옵션이 존재함. 그 중 once로 제어 가능
단, 이벤트가 실행한 후 해당 이벤트는 스스로 제거가 됨. 그래서 딱 한번만 실행되는 함수에만 사용해 함.
button.addEventListener('click', 콜백함수[, useCapture]);)에 useCaptuer부분에 true로 적어주면 캡처링으로 이벤트가 실행됨.
캡처링과 버블링이다. 캡처링은 window가 실행되면서 이벤트자식까지 순차적으로 이벤트가 전파됨, 반대로 버블링은 이벤트자식에서부터 window까지 순차적으로 이벤트가 전파됨.

addEventListener에서 'blur'은 이벤트태그가 focus가 끊나면은 실행되는 이벤트임. 예를 들어 마이메뉴를 클릭했다가 다른거를 눌르면은 포커스가 꺼지면서 blur이벤트가 실행 됨.
addEventListener에서 'blur'은 'click'이벤트보다는 먼저 실행되고, 'mousdown' 이벤트보다는 늦게 실행 됨. 그리고, blur가 안되고 계속 창을 뛰운채 다른 이벤트를 할려면은 이벤트를 하는 함수 내에 e.preventDefault()를 실행해줘야 함. 

중첩 setTimeout을 통해 setInterval보다 좀 더 유연하게 스케줄(이벤트루프)을 조절 할 수 있음.
호출 결과에 따라 다음 호출을 원하는 방식으로 조정해 스케줄링 할 수 있기 때문입니다.
CPU 소모가 많은 작업을 주기적으로 실행하는 경우에도 setTimeout을 재귀 실행하는 방법이 유용합니다. 작업에 걸리는 시간에 따라 다음 작업을 유동적으로 계획할 수 있기 때문입니다.

setInterval은 콜백함수를 실행하는데 소모되는 시간도 지연간격에 포함이 되는데 이 때, 함수를 실행하는 데 걸리는 시간이 명시한 지연 간격보다 길면 기다렸다가 바로 실행이 됨. 
그래서, 함수 호출에 걸리는 시간이 매번 지연시간보다 길면, 모든 함수가 쉼 없이 계속 연속 호출됩니다.

setTimeout은 콜백함수가 전부 실행이 끝난 후 재귀함수로 콜백함수를 실행하면은 선언해둔 지연시간이 보장이 됨.

 

https://ko.javascript.info/settimeout-setinterval

setTimeout과 setInterval을 이용한 호출 스케줄링