- Javascript Event
- addEventListener
- Event Delegation
- Event Bubbling, Event Capturing
- Event Object
- Event Target
SPA 이전 웹사이트들에서 자바스크립트의 중요한 역할은 웹사이트의 동작을 구현하는 것입니다. 여기서 말하는 동작은 애니메이션이 아닌, 동적인 상호작용을 뜻합니다. (애니메이션은 CSS3의 역할이라고 생각합니다.)
위와 같은 동적인 상호작용을 Event라고 지칭합니다. 사용자의 이벤트 요청을 받아들이기 위해서는 사용자의 이벤트 요청을 받아들이기 위한 장치를 마련해두어야 합니다.
이를 위한 가장 일반적인 방법이 addEventListener()입니다. addEventListener()의 대상이 될 수 있는 EventTarget은 Element, Document, Window와 같은 이벤트를 지원하는 객체입니다. 일반적으로는 document.querySelector()를 통해 특정 Element를 지칭하여 addEventListener()를 호출합니다.
IE9부터 사용 가능한 addEventListener()는 다음과 같은 인자를 갖고 있습니다. addEventListener MDN
type, listener, options || useCapture, wantsUntrusted
type
EventTarget에 어떤 Event가 일어났을 때, listener parameter를 호출할지 결정하는 문자열입니다. 어떤 종류가 있는지는 다음 페이지에서 확인할 수 있습니다. Event reference MDN 일반적으로 많이 사용하는 것은 click, load 등입니다.
listener()
type에서 정의한 event가 발생했을 때 호출될 객체입니다. 일반적으로 자바스크립트 함수로 합니다. 이 함수를 웹 브라우저가 호출하면서 인수로 Event 객체를 넘겨줍니다. 이 인자를 일반적으로 e 또는 event로 정의합니다. 가장 많이 사용하는 것은 Event 의 target property입니다.
listener가 return false를 반환할 경우, preventDefault()를 한 것과 동일한 효과를 보입니다. preventDefault()는 해당 Node의 기본 동작을 막는 함수입니다. 예를 들어 <a>에서 EventListener가 호출되었을 때는 listener와 더불어 <a>의 본래 역할인 URL 연결도 수행하는데, 이를 막을 수 있습니다.
options||useCapture
인수가 object이면 options를, boolean을 넘겨주면 useCapture로 인식합니다. WICG Link
useCaputre일 때 (defaultfalse)
이 인자는 Capture Phase일 때의 Event 수신 여부를 결정합니다.
false일 경우 이벤트가 발생한 node로부터 window까지 Event가 전파되는 시점에 Event를 받게 됩니다. Event Bubbling이라고 합니다.
true일 경우 Window부터 이벤트가 발생한 node까지 Event가 전파되는 시점에 Event를 받게 됩니다. 이것을 Event Capturing이라고 합니다.
options일 때
capture: Capturing 유무
once: true를 넘겨주면, EventListener를 일회성으로 만들 수 있습니다.
passive: listener에서의 preventDefault 호출 허용 여부를 결정합니다.
mozSystemGroup
그렇다면 왜 이벤트 위임을 해야 하는가?
하나의 부모 Node 밑에 있는 자식 Node들이 있다고 가정해보겠습니다. 해당 자식 Node들은 모두 동일한 Event를 발생시키길 기대합니다.
이벤트 위임을 하지 않을 경우, 자식 Node마다 Event Listener를 추가해주어야 하는 것은 물론, 이후에 자식 Node가 늘어날 때마다 Event Listener도 추가해주어야 합니다. 이렇게 하게 되면 성능도 안 좋겠지만, 프로그래머 입장에서도 매우 번거롭습니다.
그래서 자식 Node마다 Event Listener를 부여하지 않고, 그들의 부모 Node에게만 Event Listener를 부여하고, 자식에서 발생하는 Event를 받아 처리하도록 하는 것을 이벤트 위임이라고 합니다. 그러면 자식 Node가 늘어날 때마다 Event Listener를 늘릴 필요없이 부모의 Event Listener의 listener에 분기 처리만 해주면 됩니다.
이벤트 위임에는 당연히 이벤트 전파가 전제되어 있습니다. 따라서 프로그래머가 의도한 방향대로 동작하게 하려면 이벤트 전파를 제어할 수 있어야 합니다. 그러기 위해서 stopPropagation() stopImmediatePropagation() 를 사용할 수 있습니다.
-
stopPropagation()Event가Parent Node로 전파되지 않도록 합니다. 이 함수의 적용 시점은Bubbling Phase이기에,Capture와는 무관합니다. -
stopImmediatePropagation()stopPropagation()와 더불어Sibling Node에게도Event가 전달되지 않도록 합니다.