# stopPropagation

gogumaguma

이벤트가 상위 요소로 전달되는 특성이벤트가 하위 요소로 전달되는 특성클릭한 요소의 이벤트만 발생시키고 이벤트가 전달 되는 것을 막는다.요소의 여러 이벤트가 등록됐을 때 다른 이벤트의 실행을 막는다.기본으로 정의된 이벤트를 작동하지 않도록 막는다.

sododuk32

이벤트 버블링부모 elements와 자식 elements가 겹칠떄 주로 발생하며 클릭이나 휠 같은 특정 이벤트가 겹쳐있는 elements 의 이벤트를 동시에 촉발해서 발생하는 일로 될수있으면 피하는게 좋고, 꼭 겹칠수밖에없이 짠다면 eventObject.stopProp

aimzero9303

onMouseOver 와 onMouseLeave 를 mouseOver 의 값으로 구분하여 opacity 를 0 또는 1로 변화를 주어 구현했다. 하지만...

wlwl99

: 한 요소에 이벤트가 발생했을 때, 이 요소에 할당된 핸들러가 동작하고 이어서 중첩된 부모 요소의 핸들러가 동작하는 것가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복된다.예시)위의 코드는 세 개의 div 요소에 동일하게 onClick 이벤트가 등록되어 있다.이

timosean

🧐사건 발생

fe_jungseok

DOM 트리상에 존재하는 모든 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됩니다. 이를 이벤트 전파라고 한다사용자의 다양한 입력을 통해 동적으로 생성되는 이벤트 객체는 이벤트를 발생시킨 타깃(target)을 중심으로 DOM 트리를 통해 전파된다.이벤트

hongwr

보통 우리가 이런 식의 코드가 있었다고 해보자.a 태그는 li, ul의 두 개의 부모 태그가 있다.사용자가 a 태그를 클릭한다면 a 태그만 실행이 되는 것이 아니라 li, ul태그로 순차적으로 전달이 된다.즉, a 태그의 onclick -> li 태그의 onClick

dev-redo

본문은 DOM 요소의 기본 동작을 조작하는 preventDefault 메서드와 stopPropagation 메서드를 설명하고자 한다.

sjmh0507

창이 왜 두 번 나올까

seop

자바스크립트 이벤트를 사용하면서 Bubbling, Capturing, preventDefault, stopPropagation 의 개념을 기계적으로만 이해하고 로직의 구현만을 위해 구체적인 동작방식을 알고있지 않았다. 구체적인 알고리즘과 개념이 머릿속에 정립되지 않은

jiaegong

이번 과제에서는 인스타그램 같은 간단한 커뮤니티 사이트를 만들었다. 포스트 리스트가 쭉 보이고, 포스트 이미지를 클릭하면 해당 포스트의 디테일 페이지로 이동한다. 포스트에는 추가로 수정/삭제 버튼을 넣었는데, 이때 버튼을 눌러도 바로 수정이나 삭제가 되는 것이 아니라

ayaan92

기본적인 이벤트를 방지할 때 e.preventDefault()를 많이 사용했었는데 프로젝트에서 e.stopPropagation()가 사용되고 있어서 두 개의 차이를 알아보기로 했다차이를 알아보기에 앞서 먼저 두 메서드가 어떤 역할을 하는지부터 간단히 알아봤다a tag를

jangws

이벤트를 설정하는 것은 인라인 attribute 이벤트 핸들러, 속성 이벤트 핸들러, addEventListener() 메서드를 사용하여 수행될 수 있다. 이 중에서 addEventListener() 사용이 권장된다.addEventListener()에서 세 번째 매개변

hongwr

현재 selector 중

songjy377

이벤트 핸들러, 커스텀 이벤트, 이벤트 위임 등 이벤트에 대해 다룬다.

gygy

상위 div에 클릭 이벤트를 등록하고, 가장 안쪽 주황색을 눌렀을 때 하위 div에서부터 이벤트가 Bubbling 되어 three,two,one 순으로 출력된다.capture을 true로 주면 이벤트 캡처링으로 상위 div에서 하위 div로 전파되어 one,two,t

dbk03053

event Bubbling과 event 객체가 가지고 있는 함수중 하나인 stopPropagation()에 대해 알아보려고 한다.우선 event란 무엇일까!

tlatjdgh3778

이번에 개인 프로젝트를 하면서 모달창을 구현하는 일이 생겼다.react-modal 과 같은 라이브러리도 있지만 이번에는 라이브러리를 사용하지 않고 모달창을 구현하고 싶었다.1\. 모달창 디자인기본 상태(false)에서 메뉴 아이콘을 누르면 SideBar.js 의 &lt

yiyb0603

안녕하세요. 오늘은 e.preventDefault()와 e.stopPropagation() 함수 두개의 차이점에 대해서 알아보겠습니다.