공삼
article thumbnail
버블링 과 캡처링
Front-End/JavaScript 2023. 3. 31. 15:46

버블링 위의 이미지와 같이 버블링은 이벤트가 발생한 요소부터 위로 올라간다. FORM DIV P 만약 p태그를 클릭해도 form 태그에 할당된 핸들러가 동작되는 것을 말한다. 가장 안쪽의 p 태그를 클릭하면 p에 할당된 onclick 핸들러가 동작하고, 그 바깥의 div태그의 핸들러가 동작한다. 그리고 from에 할당된 핸들러가 동작한다. document 객체를 만날때까지, 각 요소에 할당된 onclick 핸들러가 동작한다. p를 클릭한다면 p, div, form 의 얼럿창이 순서대로 뜨게 되는 것이고 div 를 클릭한다면 div, form 순으로 얼럿창이 뜨게 되는 것이다. 이것은 event.target을 이용하여 접근할 수 있다. event.target 이벤트가 발생한 가장 안쪽의 요소는 타깃(tar..

article thumbnail
(JavaScript) This, Binding
Front-End/JavaScript 2023. 1. 5. 22:42

이 글은 우아한Tech 영상을 참고하여 작성하였습니다. https://www.youtube.com/watch?v=7RiMu2DQrb4 this 란? this는 현재 실행중인 함수나 메서드가 속한 객체를 참조하는 키워드이다. this를 사용하여 현재 실행중인 컨텍스트 내에서 사용되는 객체에 접근할 수 있다. 🙌 브라우저 --> this는 window 다. window에 탑재된 속성들이 출력되는 것을 볼 수 있다. 🙌 노드 --> 모듈을 가리킨다. 콘솔로그에 노드의 this를 출력하면 텅텅 빈 객체가 출력이 된다. globalThis 를 출력하면 노드에서 사용되는 전역 객체들이 출력된다. 바인딩 (Binding) 이란? 먼저 자바스크립트에서 모든 함수(Function)은 this를 갖고 있다. 함수가 호출될..