eventlistener, eventhandler 관리

이벤트 리스너, 이벤트 핸들러 둘다 window, object에서 할당이 가능하다.

window에 리스너, 핸들러를 적용할 경우 크롬 개발자 도구 에서 확인이 가능하다.

차이점은 리스너의 경우 addEventListener의 특성상 계속적으로 추가된다는 것이고, 핸들러의 경우에는 각각에 대해서 1개만 등록이 된다는 것이다. 그래서 리스너의 경우에는 EventListenr가 더이상 쓸필요가 없을때에는 removeEventListener을 해주는게 필요하다. 만약 안하게 될 경우에는 의도와 다르게 여러개의 EventListener가 작동되어 버리는 것을 경험하게 된다.

그것들을 제대로 관리할 자신이 없다면 EventHandler 를 쓰는게 맞는거 같다. 하지만 EventHandler는 하나 밖에 쓰여질수 밖에 없기 때문에 제한적일수 밖에 없다.

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener  에 따르면 동일한 이벤트 리스너는 삭제 된다고 하지만 내가 테스트 해본바로는 그렇지는 않았다. 이게 테스트 해본결과 조건이 있었다.

addEventListener 가 존재하는 함수가 있는데 그 함수 밖에 있는 함수를 addEventListener에 넣으면 호출 횟수와 상관없이 1번만 등록된다.

반면에 addEventListener( 'event', function () {} ); 형식으로 내부 함수를 형성하면 횟수에 따라서 이벤트가 계속 등록되었다.

리스너 를 제거하는 것은 window.removeEventListener() 으로 한다. 물론 window는 바꿔야 한다. 

여튼 window의 경우에는 등록한 리스너를 갯수 상관없이 다 지운다.

위에서도 언급했지만 

이벤트 리스너에서 addEventListener를 지울때에는 removeEventListener를 써야하고

이벤트 핸들러에서 on....... = function(){} 를 지울때에는 on........ = null; 를 쓰면 지워진다.

<추가>

removeEventListener은 addEventListener이 실행되는 함수? 문맥? 에서 실행되어야 한다. addEventListener이 있는 함수의 스코프?  명칭을 잘 모르겠는데 여하튼 그 함수가 종료된 뒤에 다른 함수에서 다시 removeEventListener을 하게 되면 종료가 되질 않는다.

이거 때매 삽질을 많이 한듯.