# event delegation
<JS> event delegation
event delegation이란... > event delegation, 이벤트 위임은 작성된 코드에 선언된 객체 이외에 웹 상의 상호작용으로 생성된 객체에 이벤트를 부여하는 방법이다. 그게 무슨 말이냐 하면 js 코드를 작성하고 브라우저에서 렌더링 될 때, 코드에 이미 작성된 HTML 개체는 js 코드에 의해 이벤트가 부여될 수 있다. 그러나 렌더링 이후에 상호작용으로 생기는 HTML 개체에 대해 새로 이벤트를 부여하는 것은 다른 문제이다. 새로 생성되는 요소에 대해 이벤트를 부여하기 위해 사용하는 방법이 event delegation이다. (js를 사용하다 보니 은근히 거슬리는 부분이었다.) 그럼 그 방법이 무엇이냐 새롭게 생성되는 HTML 개체의 부모 요소에 이벤트를 추가하면 된다. **부모 요소의 이벤트 수신기(e)에 e.target을 통해 click하는 특정 요소를 확인하고 해당 요소
15. 타파스 메뉴판 🍽
목표 원하는 메뉴를 추가하여 선택할 수 있고 로컬스토리지를 이용하여 선택 사항을 저장하는 메뉴판을 만들어 보자. 참고사항 이번 과제는 두 가지 방식으로 구현해 봤다. 먼저 강의를 보지 않고 내가 생각하는 방식대로 한 번 만들어 보고, 그 다음 강의에서 요구하는 이벤트 위임(Event Delegation) 방식으로 한 번 더 만들어 봤다. 둘의 차이에 대해서는 코드를 소개한 뒤에 정리해 보겠다. 레이아웃 만들기 메뉴판의 제목, 메뉴 목록, 메뉴를 추가할 수 있는 폼을 배치했고, 각 메뉴에는 선택용 체크박스와 삭제 버튼을 달았다. 로컬스토리지 기능 
[JS] 이벤트 위임
이벤트 버블링 - Event Bubbling > 하위에서 상위 요소로의 이벤트 전파 방식을 이벤트 버블링(Event Bubbling)이라고 함 코드 설명 아래와 같이 박스 세개가 중첩된 구조를 가질 때 3 depth인, 세 번째 박스를 클릭하면 이벤트 버블링 현상이 일어남으로 three -> two -> one 순서대로 아래에서 위의 순서로 console에 log가 나타나는 것을 볼 수 있다. 영상 이벤트 캡쳐 - Event Capture >이벤트 캡쳐
Event Delegation (이벤트 위임)
👀이벤트 위임 > 이벤트 위임은 상위 요소에서 하위 요소의 이벤트를 제어하는 방식입니다. 한마디로 이벤트 캡쳐링을 활용하는 것이다. 이벤트 위임을 사용하면 상위요소 이벤트하나만으로 하위요소 이벤트들을 제어할 수 있다. ✌html 🤞javascript   위의 코드에는 기본적인 리스트가 있고 기존에 있는 세번째 요소까지의 리스트를 클릭시에는 alert해준다. 또한 버튼을 누르면 기존리스트에 새로운 리스트 요소를 추가해준다. ✔ list요소 클릭시 ✔
TIL[11일차]. 클릭범위 / 코드 규칙
패치보드 커맨드를 다시 요청해줘. 리패치 쿼리즈 아이디가 우리눈에는 보이지만 없는 경우도 있음 그래서 무조건 있다고 하면 에러날 수 있음. 이때 어떻게 할 것인가. 아이디가 없는 경우는 ? 나중에 이미지 업로드까지 배워야함 동적라우터에 넣어둔 id가 에러줄이 가있는 경우 함수 안에 이렇게 boardId가 string인 타입만 아래 코드를 실행할 수 있도록 하면 에러를 사라지게 할 수 있다. try-catch에서 error에 에러줄이 가있는 경우 catch안에 를 입력시 에러가 사라진다. 이벤트 버블링 게시글 목록이 있을 때 게시글 목록을 클릭해서 상세페이지로 이동해야되는데 뭘 클릭할까. 마우스로 클릭 시 아래쪽 div도 클릭된다. 그래서 나는 한번 눌렀지만 실제로는 바닥에 있는 div까지
이벤트 드리븐 프로그래밍
브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생(trigger)시킵니다. 예를 들어 클릭, 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정 타입의 이벤트를 발생시키죠. 애플리케이션이 특정 이벤트에 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임합니다. 이벤트가 발생했을 때 호출될 함수를 "이벤트 핸들러", 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 "이벤트 핸들러 등록"이라 합니다. 이벤트 전파(event propagation) DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됩니다. 이를 이벤트 전파(event propagation)라고 합니다. 위 코드에서 li 요소를 클릭하면 클릭 이벤트가 발생합니다. 이때 **생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 event target을
코드캠프 FE 11일차 - TIL(Event-bubbling / Event - Delegation, Library)
📔 3주차 학습목표 클릭 문제 >> Event-bubbling / Event - Delegation 이미 만들어졌다고? >> Library UI의 전체적인 구조를 잡아놓자 >> Layout 다른 페이지도 보여줘 >> Pagination / Infinite-Scroll(sns볼 때) State 나눠줘 >> Lifting-State-Up > 📔 학습목표 클릭 문제 >> Event-bubbling / Event - Delegation 이미 만들어졌다고? >> Library > 주말과제 코드리뷰 코멘트 달기 + 코멘트 리스트 + 삭제 (수정하기 + 별점은 아직 어려우니 나중에!) > ⚒ comment 만드는 순서 **댓글 목록보
11) tsx : 어려울게 / 나 : anyscript 할게
React > 이번주 커리큘럼1.Event-Bubbling / Event-Delegation 2.Library 3.Layout 4.Pagination / infinite-Scroll 5.Lifting-State-Up 자유게시판 코드리뷰 > 1.아니 진짜 댓글부분은 컴포넌트 따로 빼서 만들고 인덱스 return에서 게시글 부분이랑 합쳐주면 되는데 댓글 밑에 붙이겠다고 그걸 board랑 한군데에 같이 만들고 있었다 그러니까 당연히 안받아와지지 데이터가 두개니까요 ,,,멍충지송한 나 comment 컴포넌트 따로 빼서 만들기 나중에 재사용하기 편하게,, > 상세페이지에 이렇게 나눠서 만들어주기 근데 나는 댓글 작성은 거기에 같이 했으니까 밑부분에 코멘트 받아오는것만 하면 됨 > 2.댓글
[TIL] 프론트엔드 Day 20
📚 공부한 내용 1. Event 이벤트 이벤트는 주로 마우스를 클릭하거나 스크롤을 내리는 등 사용자의 동작에 의해서 발생한다. 우리는 DOM Element에 addEventListener를 사용해 특정 이벤트가 발생할 때, 어떻게 처리할 것인지 이벤트 핸들러를 등록할 수 있다. 하나의 Element에 여러개의 이벤트가 존재할 수 있으며, removeEventListener를 사용해 제거하는 것도 가능하다. 만약 핸들러가 등록된 element에 이벤트가 발생하면, 브라우저는 이벤트에 관련된 세부 내용들을 Event Object에 넣어 핸들러에 전달한다. 이벤트 페이즈 이벤트는 3개의 단계(Phase)를 거쳐서 생성되고 소멸한다. Capturing Phase DOM tree의 최상위 요소부터 이벤트가 발생한 target element까지 전파되는 단계. Target Phase 이벤트가 실제 target element까지 전파되는 단계
이벤트 버블링, 캡처링, 위임
Event Bubbling - 이벤트 버블링은 이벤트가 특정 요소에 이벤트가 발생했을 때, 이벤트가 발생한 요소보다 상위요소에 전달되는것을 의미한다. 상위요소? HTML요소는 트리구조를 갖는다. 트리구조에서 한 단계 위에 있는 요소를 상위요소라 하고, 최상위요소를 body라한다. Event Capture - 이벤트 캡쳐는 최상위요소(body)에서 이벤트를 발생할 태그까지 탐색한다. addEventListener() API에서 옵션 객체에 capture:true로 해주면 감지 > 이벤트 버블링은 이벤트를 감지하기위해 하위 -> 상위로 탐색 이벤트 캡쳐는 이벤트를 감지하기위해 상위 -> 하위로 탐색 반대되는 개념이라 할 수 있다. Event Delegation - 이벤트 위임은 이벤트리스너를 등록한 시점이 달라 새로 추가될 작업에 이벤트리스너가 적용되지 않을 때 사용할 수 있는 작업방법이다. 이벤트리스너를 상위요소 태그
11) 인기짱 라이브러리들을 쓰자! ant-design! 이벤트 버블링! 근데 이번주 월화수목금은 25시간 잘수있을까 (?) (code-camp fe 6기)
오늘의 요약 _**오늘은 이벤트 전파와 버블링에대해서 배웠는데 어떠셨나요? 이벤트 버블링이란 어떤 요소에 이벤트가 발생되었을때 더 상위요소들로 전달되는 특성이었습니다. 이런 이벤트 버블링 때문에 프로젝트를 진행하면서 게시판 목록에서 목록을 클릭하여 상세보기로 넘어가는 과정에서 작동이 잘 되지 않으신 분들이 계셨을텐데,오늘 배웠던 것 처럼 currentTarget을 이용해 보완해주시면 되겠죠? 또한 오늘 개발자의 부품 라이브러리를 사용해 보았습니다. 세상에 라이브러리는 많고..나는 뭐가 좋은지 모르겠다 하실땐 다운로드 수를 봐주시면 됩니다! 또한 크롬 브라우저 이외에 다른 브라우저에도 작동이 되는지 호환성을 봐주셔야 합니다. ❗️그리고 라이브러리는 사용하실때 꼭 제공 docs를 읽고 어떻게 사용하는지 이해하신 후 사용해주세요! ❗️ 그렇지 않으면 뚝딱거리는 나의 프로젝트를 보게 되실겁니다ㅎㅎ😁 > - goodmorning self study 이제 알고리즘이 어렵다 나에
[JS]scrollIntoView event handlers, bubbling & capturing, event delegation, DOM traversing
강의 출처 : The Complete JavaScript Course 2022 Jonas (Udemy) Implementing Smooth Scrolling scroll 관련 알아두면 좋은 정보들 > * getBoundingClientRect() : relative to visible viewport window.screen : 모니터 size window.outer : page를 넘어선 browser 전체 크기 ( url + tab + page) window.inner : 스크롤바 포함한 viewport document.documentElement.clientHeight, document.documentElement.clientWidth : viewport의 높이와 너비. scroll bar 제외 window.pageXOffset, window.pageYOffset : viewport의 가장 끝에서 top of the page의 길이 s
.gif)
[JS30] -25) Event Capture, Bubbling, Propagation and Once
Bubbling 상위 div에 클릭 이벤트를 등록하고, 가장 안쪽 주황색을 눌렀을 때 하위 div에서부터 이벤트가 Bubbling 되어 three,two,one 순으로 출력된다. Capturing capture을 true로 주면 이벤트 캡처링으로 상위 div에서 하위 div로 전파되어 one,two,three 순으로 출력된다. Once Once를 true로 설정하면 이벤트를 들고해 한번 호출한 후 해제한다. stopPropagation stopPropag
[JavaScript] 이벤트 위임(event delegation)
시작 전 주절주절 인스타그램 클론 코딩 중 댓글 추가 기능을 구현하고 추가로 댓글 삭제 및 좋아요 기능을 구현하고 있었다. 시작 전에는 새로 추가된 태그에 이벤트를 추가하면 되겠네 이 정도면 쉽지~ 😗 라고 생각을 했는데 막상 시작을 해보니 DOM을 통해 새로 추가된 태그에 이벤트를 넣는 게 생각보다 쉽지는 않았다. >삽질한 코드는 잘 기억이 나지는 않지만 해당 클래스에 for 문 그 안에 이벤트를 추가한 거 같다. 위 코드처럼 작성을 하니 자바스크립트가 불러와지는 순간 실행이 되어 HTML로 미리 작성한 태그에만 좋아요 와 삭제 기능이 추가가 되고 DOM을 통해 추가된 태그에는 적용이 되지 않았다. 그래서 점심시간에 동기분에게 '댓글 삭제랑 좋아요 기능을 추가하는데 어떻게 해야 할지 모르겠다 머리가 아프다.'라고 하니 바로 이 이벤트 위임(event delegation)에 대해 말씀해 주셔서 기능들을 잘 추가할 수 있었다. 이벤트 위임(event d
이벤트 리스너와 이벤트 위임
제목이 좀 거창해진것 같은데;; 이벤트 리스너를 왕창 붙이면 성능에 좋지 않다는 건 대충 들어 알고 있었다. (addEventListener 처럼 무언가를 대기해야 하는 애들은 스택에 들어가지 않고 따로 빠졌다가 큐를 거쳐 스택이 비었을때 스택으로 들어간다고 공부했었다. 그러니 이벤트리스너를 수백 개 붙이면 큐가 엄청 바빠질 것 이다) 그래서 이벤트리스너가 좀 붙는다 싶으면 나는 그것들을 감싸고 있는 컨테이너 요소에 이벤트 리스너를 붙이고 e.target 등을 사용해서 필요한 요소를 타겟팅하여 코드를 작성하곤 했다. 오늘도 ui 스터디 하다가 작은 div 500개에 이벤트 리스너를 냅다 붙이는 튜토리얼을 보고 기록 겸 여기에 남긴다. 500개에 이벤트 리스너 다 붙였을 때 
Event delegation
Event bubbling이란? 하위 엘리먼트에 event가 발생할 때 그 element부터 시작해서 상위요소까지 event가 전달되는 방식. Event capturing이란? 하위 엘리먼트에 event handler가 있을 때 상위 element부터 event가 발생하기 시작해서 하위 element까지 event가 전달되는 방식 Event bubbling: Event capturing: addEventListener()의 3번째 인자로 { capture: true }를 전달하면 클릭한 element의 상위요소 중 event capturing이 적용된 엘리먼트부터 콘솔에 찍히고 그 다음부터는 다시 event bubbling 방식이 동작. Event de
25. Event Capture, Propagation, Bubbling and Once
프로젝트 소개 Event 발생 시 bubbling과 capture 그리고 addEventListener 함수의 option 인자(capture와 once)에 대한 학습 배운 것들 Event Bubbling : 특정 element에서 event 발생 시, 상위 element로 이벤트가 전파(propagation)되어 가는 현상 : 예를 들어, nested div 태그가 있고 모든 div에 click 이벤트가 붙어 있으면, 최하위 div 클릭하면 그 위에 있는 모든 상위 element들에 이벤트가 차례로 발생함 Event Capture : 위의 Event Bubbling과 반대방향으로 전파(propagation)하는 방식 event.stopPropagation() : 가장 직접적으로 이벤트가 발생한 element 이외에 전파(propagation)를 멈추기 위한 함수 Event Delegation : 하위 요소
[JS]이벤트 위임 (Event Delegation)
이벤트 위임 (Event Delegation) event capture 와 bubbling을 이용해 이벤트 위임을 구현할 수 있다. ul안에 수많은 li가 있거나 테이블 안에 많은 tr, td가 있을 때 모든 elements들에 다 event를 거는 것은 번거롭다. 이를 ul 또는 table에 이벤트를 걸어서 이벤트 위임을 통해서 편하게 이벤트 핸들링을 할 수 있다. 즉, 컨테이너에 하나의 이벤트 핸들링을 달아놓고 그곳에 조건을 추가해 원하는 이벤트를 발동 시키는 것이다. 원하는 조건은 event.target을 이용하면 자신이 원하는 상황인지 판단할 수 있다. cloest, [html의 data-OOO 속성, js의 event.target.dataset.OOO] 등을 이용하면 event.target을 이용해 원하는 조건을 쉽게 만들 수 있다. ex) cloest 이용 예제 이 li의 하위에 있는 태그를 클릭해서 li를 삭제하고 싶다면 이런
React에서 이벤트 위임을 통한 이벤트 리스너 최적화
결론만 말하자면, 이벤트 위임을 통해서 이벤트 리스너의 개수를 줄이려 하더라도 의미 없고, 성능 향상도 없다. 성능 향상을 목적으로 하는 Native JS 에서의 이벤트 위임(Event Delegation) DOM 객체가 매우 많을 경우 이벤트 리스너를 각 객체마다 부착하게 되면 메모리 누수와 성능 저하가 문제가 된다. 따라서 이벤트 버블링을 응용하여 부모 엘리먼트에 리스너를 위임하여 부착하면, 리스너의 개수를 1개로 줄여 최적화할 수 있다. 리액트에서의 이벤트 위임 리액트에서는 자체 이벤트 시스템을 갖고 있어서, 이미 document 최상단에서 이벤트를 잡아 자체적으로 처리한다.(리액트 v16.0) 참고: 리액트 v17.0에서, 이벤트 리스너를 document에 붙이는 것이 아니라 리액트가 관리하기 시작하는 div에 붙이는 것으로 바뀌었다. 따라서 이벤트 위임을 통한 성능상의 이득은 없다
이벤트 버블링/캡쳐링
브라우저는 특정 화면 요소에서 이벤트가 발생(클릭/타이핑 등등..)시 기본적으로 그 이벤트를 최상위에 있는 화면 요소까지 전파시킨다.(이벤트 버블링이 기본이므로) 이 때 이벤트 전파방식은 버블링과 캡쳐링 2가지로 나눌 수 있다. 버블링 화면의 하위요소->상위요소로(최상위요소 body까지 전달) 이벤트를 전파하는 방식 브라우저는 특정 화면 요소에서 이벤트가 발생시 기본적으로 그 이벤트를 최상위에 있는 화면 요소까지 전파시킨다. 따라서 최하위 div 태그 를 클릭하면 3->2->1순으로 출력 캡쳐링 화면의 상위요소(최상위요소body부터 시작)->하위요소로 이벤트를 전파하는 방식 event.stopPropagation() 나는 버블링이건 캡쳐링이건 관심이 없다!원하는 요소의 이벤트만 발생하게 하고 싶을때 사용 사용방법->이벤트 리스너의 2번째 인자에 있는 콜백함수 최상단에 *event.stopPropagation()을 추가