이벤트 위임(delegation)이란?
말 그대로 이벤트 핸들러를 다른(상위 태그)에 위임(원래 내가 해야하지만 대신 부탁해~~^^)하는 행위이다.
왜 하는가?
-
이벤트 핸들러 한번 연결할 때 마다 기본적으로 메모리를 꽤나 잡아 먹는다.
-
당연히 listen이라는 작업 특성상 항상 대기해야 하기 때문에 어떻게 보면 당연하다.
-
따라서 원하는 요소를 만들때 마다 이벤트 핸들러를 추가해 버리면 사용자에게 매우 부담되는 페이지가 될 수 있다.
-
부과적인 문제지만 이벤트 핸들러는 태그가 삭제되어도 자동으로 삭제되지 않아(js GC는 뭐하는지?) 따로 호출해야 하는데(메모리 누수가 여기도 발생하네) 이 역시 이벤트 위임을 통해 자동적으로 해결된다.
메모리 누수는 꽤나 어디에서나 등장하는 이슈인 듯 하다. 밑에 간단히 정리해 보았다.
더 잘 정리되고 전문적인 블로그 글
하는 방법
공통
- click이벤트를 걸 태그를 포함하는 상위 객체에 이벤트 핸들러를 등록한다.
부모태그.event.target.getAttribute(ex) 'data-value'(원하는 데이터 속성 이름)) 한다.
문제
버튼에 이벤트를 단다고 해도 버튼에 버튼만 있지 않고 이미지가 있을 수 있고, react에서 컴포넌트 단위로 하게 될 수 있다.
그러면 정확히 button만 클릭해야지 원하는 값을 얻을 수 있고, 안에 다른 태그를 누르면 원하는 값이 안나온다.
해결 1. html노가다
- 하위 태그에도 원하는 속성을 전부 명시하는 것이다.
<button ... data-value="1">
<img ... data-value="1"></button>
<span ... data-value="1"></button>
</button>만약 이 방법을 보고 이건 아닌데..싶은 생각이 들지 않는다면 해보는걸 권한다.
나중에 하.. 이걸 언제 다 수정하냐.. 라는 느낌을 충분히 느끼면 자동으로 기피하게 될 것이다.
해결 2. css를 통해서
- 하위 태그에 css 속성에 저걸 넣는거다.
.icon{
pointer-events: none;
}
.name{
pointer-events: none;
}
를 넣으면 된다.
문제
이러면 나중에 하위 태그에 어떤 이벤트를 걸고 싶거나 e.target으로 하위 태그를 찾을 수 없다고 한다.
직접 해보진 않아서 확신할 수는 없지만, 나중에 확인하면 이 부분을 지우겠다.
해결 3. js로 부모 태그를 찾는다
- 이전에 트리 탐색과 비슷한 느낌을 받았는데, 암튼 본인 태그의 클래스가 원하는 태그의 클래스가 아니라면. 부모 태그로 옮기는 것이다.
let elem = e.target;
while(!elem.classList.contains('원하는클래스이름')){
elem = elem.parentNode;
}이때 상위 부모를 먼저 선택했다면 나갈 수 있는 조건을 걸어두면 완성이다.
let elem = e.target;
if (elem.classList.contains('부모클래스이름')){
return;
}
while(!elem.classList.contains('원하는클래스이름')){
elem = elem.parentNode;
}아직 실제로 사용하지 않아서 확신은 없지만 왠지 잘 될 것 같다.
나중에 react로 컴포넌트 만들고 event만들때 잘 적용해보자.
부록!
메모리 누수란?
프로그램을 동작하기 위해 OS에 저장공간(메모리)을 요청해 할당 했지만, 나중에 해당 공간이 필요가 없음에도 OS에 반환을 하지 않는 것을 말한다.
메모리란?
- 메모리는 Ram이다.
- Ram은 CPU가 접근할 수 있는 저장공간이고
HDD(하드디스크)의 저장공간이 아무리 넉넉해도 HDD에서 바로 데이터를 뽑아 CPU에 넣을 수 없다.
왜 안되냐 따지면 기계적으로 구조상 안되는 듯하다 괜히 메모리가 비싼게 아닐 것이다.
- 그 공간은 제한적이다.
- 일반 PC사용자라 했을 때 8G ~ 16G이다.
옛날 옛적에 비해 굉장한 발전이지만 프로그램이 잡아먹은 메모리도 상응하게 커졌기 때문에 역시 메모리를 잘 관리하는 것은 개발자에게 중요한 이슈이다.
뭐 이렇든 저렇든 간단히 말하자면,
메모리 공간은 소중히 여겨야 한다는 말이고
그럼 변수같은 거는 왜 메모리 누수가 발생하지 않냐 라고할 수 있는데 이는 고수준 언어의 특징인 가비지 컬랙션이 있기 때문이다.
MDN 가비지 컬랙션 파트
학생때 존경하던 교수님이 항상 "훌륭한 프로그래머가 될려면 ~" 하고 이런저런 개념을 시험엔 출제하지 않지만 한번이라도 들어보게 할려고 설명해 주시는데 그렇게 멋있어 보일 수가 없다.
언젠가 취업하면 가장 먼저 찾아뵙고 싶다.
