지난 포스트에서 이벤트 버블링(bubbling)에 대해 소개한 바 있다. [Javascript] 이벤트 버블링버블링(bubbling)의 원리는 간단하다. 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작한다. 이러한 과정이 가장 최상단의 조상 요소를 만날developing-move.tistory.com   이벤트에는 버블링 외에도 캡처링(capturing)이라는 흐름이 존재한다. 실제 코드에서는 자주 쓰이지 않지만 종종 유용한 경우가 있으니 알아보도록 하자. cf) 캡처링 단계를 이용해야 하는 경우는 흔치 않기 때문에, 캡처링에 관한 코드를 발견하는 일은 거의 없을지도 모른다. 표준 DOM 이벤트에서 정의한 이벤트 흐름에는 아래의 3가지 단계가 있다. 캡처..

버블링(bubbling)의 원리는 간단하다. 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작한다. 이러한 과정이 가장 최상단의 조상 요소를 만날 때까지 반복되면서 각 요소에 할당된 핸들러가 동작하는 것이다.   3개의 요소가 grand-div > parent-div > child-div 형태로 중첩된 구조.가장 안쪽에 위치한 child-div를 클릭하면 다음과 같은 순서로 이벤트가 발생한다.  1) child-div에 할당된 onclick 핸들러가 동작한다.2) parent-div에 할당된 onclick 핸들러가 동작한다.3) grand-div에 할당된 onclick 핸들러가 동작한다.4) 위와 같은 과정으로 document 객체를 만날 때까지 각 요소에..

본 예시는 React에서 onClick 이벤트를 실행하는 방법입니다. onclick을 onClick camelCase로 표기하는 것 이외에는 큰 차이는 없습니다. 예시 소스 import React from "react"; function App() { const handleClick = () => { alert('button is clicked'); } return ( // camelCase 표기법으로 표기 this is a button ) } export default App; 파라미터로 값 받기 이벤트 버블링(event bubbling) 방지 이벤트 버블링이란? DOM 객체 이벤트가 실행될 때 하나의 DOM 객체가 내부 안에 있어 외부와 중첩되는 경우 해당 하는 기능이 두 번 실행 되는 것을 방지한다..