자바스크립트

이벤트를 딱 한번만 일어나게 하고싶을 때 - 자바스크립트 DOM 꿀팁

자바스크립트에서 콜백이벤트가 딱 한번만 일어나게 하고싶을 때 사용할 수 있는 꿀팁! 바로 이벤트리스너의 세번째 인자값으로 once 옵션을 추가해주면 된다. document.body.addEventListener('click', () => { console.log('I run only once! 😇'); }, { once: true }); 기본값은 false로 지정되있어, 클릭될 때마다 이벤트가 항상 일어난다. once: true로 지정해주면 처음 이벤트가 일어났을 때에만 콜백함수가 실행된다. 혹은 이벤트가 일어났을 때 해당 이벤트를 remove해주는 함수를 만들어줄 수도 있다. 근데 once옵션이 너무 간단하니까~ 그걸 쓸 듯? document.body.addEventListener('click', cb..

JS 이벤트 플로우 완벽이해

html>body>button 의 부모자식관계를 가지는 html구조가 있다고 치자. 눌러주세요 각 요소들에 click event를 만들고, button을 click하면 어떻게 될까? 우리는 입장에서는 어려울 것 없이 button이 먼저 실행된다고 생각하지만 아니다. 엄밀히 말해 우리는 html안에있는 body안에있는 button을 누른것이기 때문에 브라우저 입장에서는 이 세가지중 정확히 무엇을 누른건지 애매하다고 생각하기 때문이다. 그래서 button에 클릭이벤트가 일어났을 때, 만약 부모요소에도 이벤트가 적용되어 있다면 이 경우 브라우저는 전부 다 실행을 시켜버린다. (body와 html에 클릭이벤트가 없으면 아무상관없는 이야기) 어떤 순서로? 아래 event flow 순서로! [이벤트가 실행되면 브..