JavaScript12 [JavaScript] 이벤트 캡쳐링(Event Capturing) 📃 이어지는 글 이벤트 플로우(Event Flow) 이벤트 버블링(Event Bubbling) + e.stopPropagation() 이벤트 캡쳐링(Event Capturing) ← Now ! 이벤트 위임(Event delegation) 🤔 캡쳐링이란? 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식 상위요소 → 하위요소 이벤트 전달이 진행 됨 (propagate down) 클릭 const html = document.documentElement; const body = document.body; const div = document.querySelector("div"); div.addEventListener("click", function () { console.log("div"); }); b.. 2021. 9. 23. [JavaScript] 이벤트 버블링(Event Bubbling) + e.stopPropagation() 📃 이어지는 글 이벤트 플로우(Event Flow) 이벤트 버블링(Event Bubbling) + e.stopPropagation() ← Now ! 이벤트 캡쳐링(Event Capturing) 이벤트 위임(Event delegation) 🤔 버블링이란? 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성 (propagate up) 클릭 const html = document.documentElement; const body = document.body; const div = document.querySelector("div"); div.addEventListener("click", function () { console.log("div"); }); body.a.. 2021. 9. 17. [JavaScript] 이벤트 플로우(Event Flow) 📃 이어지는 글 이벤트 플로우(Event Flow) ← Now ! 이벤트 버블링(Event Bubbling) + e.stopPropagation() 이벤트 캡쳐링(Event Capturing) 이벤트 위임(Event delegation) 😎 들어가기 전에?! 이벤트 핸들러 = 이벤트 리스터 = 이벤트 콜백함수 (모두 같은 말!) elementDiv.addEventListener('click', function(){ // 클릭을 했을 때 console.log('click했습니다') // 할 일 }, false); // 옵션 // [이벤트가 일어날 애].addEventListener( [어떤 행동을 했을 때], // [할 일], // [옵션, useCapture Boolean으로 넣어주기, 디폴트=false.. 2021. 9. 16. [JavaScript] IIFE(Immediately Invoked Function Expression) 😎 IIFE(Immediately Invoked Function Expression)란? 즉시 실행 함수, 함수 선언과 동시에 실행시킴 (function() {})(); 의 형태를 가짐 ( function() { ... } )(); 함수선언식이 아니고 함수를 실행시키는 괄호 함수 표현식임을 js에게 알려줌 실행 컨텍스트 내에서 모든 변수, 함수등이 선언되므로 모든 데이터는 IIFE의 로컬스코프 안에만 저장된다. 이는 전역스코프를 오염시키지 않고, 외부에서 멋대로 IIFE 내부의 값에 접근할 수 없기 때문에 값을 안전하게 보관할 수 있다. var example1 = (function() { function a() { return 5; } return { a : a // {호출할때 쓰는 이름 : 실제 데이터.. 2021. 9. 15. [JavaScript] 이벤트 루프 🙋♀️목차 JavaScript는 싱글 스레드로 동작?! 브라우저 환경 비동기 코드는 어떻게 작동하는가? 헷갈리기 쉬운 예제 (0초 후에 실행?) 💻Javascript는 싱글 스레드로 동작?! ✅싱글스레드 = 한 번에 하나의 작업만 수행 그런데 어떻게 비동기로 일을 처리할 수 있는거지?🤔?? → 자바스크립트가 구동되는 환경(브라우저, Node.js 등)에서는 주로 여러개의 스레드가 사용되며, 이러한 구동 환경이 단일 호출 스택을 사용하는 자바 스크립트 엔진과 상호 연동하기 위해 사용하는 장치가 바로 이벤트루프!! 💻브라우저 환경 위 그림은 브라우저 환경을 간단하게 그림으로 표현한 것이다. 자바스크립트 엔진 (자바스크립트 코드를 해석하고 실행하는 인터프리터) Heap : 메모리 할당이 일어나는 부분 Cal.. 2021. 8. 14. 이전 1 2 3 다음
