[🌳javascript] 이벤트

이벤트

모든 DOM 노드는 click, focus, keydown 등 사용자와의 상호작용에 따라 event라는 신호를 발생시킨다. 그리고 그러한 이벤트 발생에 따라 실행될 함수를 설정하는 것을 이벤트 핸들러를 할당한다고 한다.

이벤트 객체

브라우저에서 이벤트가 발생했을 때 생성되는, 이벤트 상세 정보가 담긴 객체를 의미한다. 다양한 상세 정보들 중, 자주 사용되는 정보는 아래와 같다.

• target: 이벤트가 처음 발생한 대상
• currentTarget: 현재 이벤트가 위치하고 있는 대상
• clientX: 브라우저 상에서 이벤트가 발생한 좌표
• clientY: 브라우저 상에서 이벤트가 발생한 좌표
• type: 이벤트의 타입

++ 리액트는 브라우저 자체의 native event를 활용하는 것이 아니라, 브라우저 간의 호환을 위해 해당 event를 감싼 synthetic event를 활용한다. 그래서 이벤트 객체의 이름 또한 SyntheticBaseEvent라고 나오는 걸 확인할 수 있다.

이벤트 버블링

하나의 요소에 이벤트가 발생하면, 해당 요소의 이벤트 핸들러가 작동하고, 이어서 그 부모의 이벤트 핸들러가 작동하여, 최상단의 요소까지 각 요소에 할당된 핸들러가 작동하는 현상.
이벤트 객체에서 e.target VS e.currentTarget의 차이
target은 이벤트가 처음 발생한 대상, currentTarget은 현재 이벤트가 위치하고 있는 대상, 즉 이벤트 버블링으로 인해 이벤트가 발생하고 있는 현재의 요소를 가리킨다.(이벤트 핸들러가 중첩되었을 때만 존재함)

만약 중단하고 싶으면, e.stopPropagation을 사용해주면 된다.

이벤트 위임

동일한 방식으로 여러 요소의 이벤트를 다뤄야 할 때 사용할 수 있다. 1번 버튼, 2번 버튼, 3번 버튼 모두 같은 이벤트를 사용한다면 각 버튼마다 이벤트를 달아줄 것이 아니라, 이 요소들의 공통 부모인 요소 한 개에 이벤트를 설정해놓으면 훨씬 간결하고 효율적인 코드가 된다.

++ 함수를 실행할 때, 인자를 전달하면서 실행하고 싶다면 화살표 함수 형태로 작성해서 명시해주어야 한다.(화살표 함수를 작성하는 것은 함수를 실행하는 것이 아니라 정의하는 것!!)