# bubbling

15개의 포스트
post-thumbnail

Day.18 바닐라 자바스크립트(2021.08.25)

HTML > BODY > BUTTON 위에 코드를 실행해보면 화면에 버튼 한개가 보인다. 이때 버튼을 클릭하게 되면 어떤일이 벌어질까?결과값 : button,body,html 출력 html태그들은 중첩되있기 때문에 이벤트가 발생할시 특정 event flow가 발생한

2021년 8월 25일
·
0개의 댓글
post-thumbnail

[JavaScript] 버블링과 캡쳐링 (Bubbling & Capturing)

이벤트 버블링은 어떤 요소에 이벤트가 발생했을때 어떠한 한 요소의 이벤트만 실행시키고 싶어도 그 요소가 속한 부모요소에 까지 이벤트가 전파되어 전부 다 실행되어지는 것을 말한다.이벤트 캡쳐링은 어떤 요소에 이벤트가 발생했을때 최상위 부모로부터 이벤트가 발생된 요소까지

2021년 8월 11일
·
0개의 댓글

JavaScript : bubbling다루기

event.stopPropagation();부모 class로 bubbling이 일어나지않게됨 권장xevent.stopImmediatePropagation();부모 class로 bubbling이 일어나지 않으며 같은 타겟내에서 이후에 등록된 다른 eventlisnter도

2021년 8월 7일
·
0개의 댓글
post-thumbnail

target / currentTarget

Javascript 그리고 React를 사용하다보면 어떤 곳을 클릭해야하는 일이 생기며, 이 클릭한 요소를 가져오는 방법이 필요하다.이 때 사용하는 것이 바로 e.target.value 혹은 e.currentTarget.value 이다.그런데 이 둘은 어떻게 다른 것일

2021년 5월 11일
·
0개의 댓글

이벤트의 흐름과 Event 객체

😀 이벤트의 흐름과 Event 객체를 알아보자!

2021년 5월 1일
·
0개의 댓글
post-thumbnail

stopPropagation 과 preventDefault 차이는 뭘까??

stopPropagation 과 preventDefault 차이

2021년 3월 23일
·
0개의 댓글
post-thumbnail

[프론트엔드 101 .3] DOM 완전정복 실전, 이벤트

overflow-y 요소들이 점점 늘어나면 자동으로 스크롤바가 생기도록 해준다. Div 태그는 블록레벨이기 때문에 margin이 자동으로 오른쪽으로 간다.

2021년 3월 1일
·
0개의 댓글
post-thumbnail

Event

프로그래밍에서는 observer (정보의 변화를 감지하는 코드) 패턴이라는 실행방식이 있다.관찰 대상객체의 특정 정보가 변경되면 observer 코드가 이를 감지하고 정해둔 코드를 실행 하는 것이다.브라우저에서도 이와 같은 방식을 사용할때가 있다. DOM 이 만들어낸

2021년 1월 17일
·
0개의 댓글
post-thumbnail

[JavaScript] 이벤트 버블링, 캡쳐링, 위임

프론트엔드 면접을 볼 당시에 이벤트 버블링, 캡쳐링에 대한 질문을 받았었는데 대답을 제대로 하지 못해 면접을 시원하게 말아먹었던 기억이 생각나 작성하는 포스팅... 다신 볼 일없게 꼼꼼하게 정리하자..!

2021년 1월 16일
·
0개의 댓글

이벤트 캡처링 & 버블링

Html 조작을 위해 스크립트를 작성하다 보면 종종 내가 원하는 곳에 이벤트를 할당하고 제어하는것이 어려울 때가 있다.HTML 태그를 살펴보면 form > div > p 의 상관관계가 있다.그럼 만약 p 태그를 클릭한다면 어떤일이 발생할까?p => div => form

2021년 1월 13일
·
0개의 댓글
post-thumbnail

todoList 버블링

todoList를 javascript로 프로젝트를 진행하던 중 리스트를 추가했을시 이벤트가 먹히지 않는 상황에서 시간을 많이 허비하였다. 이벤트 위임시 버블링이생겨 추가되는 요소의 이벤트도 가져올수 있다는 개념이 떠올라서 시도해 보았다.가장 부모엘리먼트인 todo-li

2020년 12월 10일
·
0개의 댓글
post-thumbnail

[JS]이벤트 전파 캡쳐링, 버블링

addEventListenertarget.addEventListener(type, listener, useCapture);addEventListener의 구문이다.type : 이벤트의 유형listener : 이벤트가 발생했을 때 실행하는 콜백함수useCapture :

2020년 11월 20일
·
0개의 댓글
post-thumbnail

버블링(Bubbling) & 캡처링(Capturing)

직접 태그에 적용하는 방법입니다. DOM 요소를 가져와서 on을 이용해서 이벤트를 적용하는 방법입니다.target.addEventListener(type, listener, options);javascript에는 이벤트를 추가하는 방법 중 가장 추천하는 방법은 addE

2020년 10월 12일
·
2개의 댓글
post-thumbnail

[TIL] 2020. 09. 24. Event Bubbling

이벤트 버블링은 한 요소에서 이벤트가 발생하면 , 할당된 핸들러가 실행되고 이어서 부모 요소의 핸들러도 작동되는 것을 말한다. 버블링은 가장 최상단의 요소를 만날 때까지 반복된다.버블링을 멈추기 위해서는 이벤트 객체의 메서드인 event.stopPropagation()

2020년 9월 24일
·
0개의 댓글

Event 다루기

About Event control

2020년 4월 15일
·
0개의 댓글