event handling
target, currentTarget의 차이점
- e.target:
실제 이벤트가 발생한 요소를 나타낸다. - e.currentTarget:
발생한 이벤트에 해당하는 이벤트 핸들러가 등록된 요소를 나타낸다.
버블링, 캡처링
- 이벤트 발생과 순서
- 이벤트가 발생하면 최상단 조상요소부터 이벤트가 발생한 요소까지 내려간다(캡처링)
- 이벤트가 실제 타깃 요소를 만난다. (타깃)
- 이벤트가 최상단 조상 요소로 까지 다시 위로 올라간다. (버블링)
버블링 중단하기
<body onclick="alert(`버블링은 여기까지 도달하지 못합니다.`)">
<button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body>- 타겟요소에서 stopPropagation()을 실행하면 버블링이 중단되고 상위 요소로 이벤트가 전파되지 않는다.
캡처링 사용하기
elem.addEventListener(..., {capture: true})
// 아니면, 아래 같이 {capture: true} 대신, true를 써줘도 됩니다.
elem.addEventListener(..., true)- addEventListener로 이벤트핸들러를 등록할때 capture 속성값을 true로 설정하면
최상단 요소에서 타깃요소로 전파되는 이벤트를 캡처링해서 핸들러를 실행할 수 있다.
(default는 false로 버블링 단계에서만 동작)
실제 이벤트가 발생하지 않은 요소에서 이벤트핸들러가 실행되는 이유?
이벤트 버블링에 의해 타겟 요소에서 최상단 조상 요소로 다시 이벤트가 전파되기 때문에
동일한 이벤트로 등록되어있는 핸들러가 실행될 수 있다.
(focus.. 등의 이벤트는 버블링 되지 않는다.)
event 객체 사용
- on + 이벤트속성에는 함수의 참조값이 들어간다. (함수 실행문이 아님)
- 요소의 event객체를 받기 위해서 함수로 감싸서 event 객체를 받을 수 있다.
- 또는 리액트에서는 함수 참조값만 들어가도 자동으로 event 객체를 인자로 받을 수 있다.
