onclick에 등록한 함수를 제거하려면?

오픈톡방에서 질문이 하나 올라왔습니다.

".onclick 으로 등록한 함수는 어떻게 제거하나요?"

onclick에 null을 대입하는 것을 답변드렸더니, 질문하신 분이 (아쉽게도 이유는 기억하시지 못하지만) 어디에서 null을 대입하는것으로 제거하지 말라고 얘기를 들었다고 하시더라구요.

갓글에 검색해보니 null을 대입하지 말라는 얘기는 찾을 수 없었지만 .onclick = null로 제거하는 방법 외에 .removeAttribute('onclick')을 찾을 수 있었습니다. 다른 방법이 있다면 공유해주세요!

질문하신 분께 의도를 여쭤보니, 메모리 관련 이슈라고 하여 onclick에 null을 대입하였을 때, GC가 잘 긁어가는지 확인해보았습니다. 메모리에 참조가 없으면 GC가 해제해준다고 알고 있지만, 이벤트 리스너라면 예외가 있을까 테스트해봤습니다. 하지만 GC는 예외가 없었습니다

(📸)

1. 먼저 살포시 DOM 요소를 많이 생성해줍니다. 왠만해선 티가 잘 안날테니 많이 만들어 줍니다.

const bodyEl = document.getElementsByTagName("body")[0];
for(let i=0; i<10000; i++) // 100만개는 tab 멈춥니다.. 10만개는 스냅샷이..
{
  bodyEl.appendChild(document.createElement("div"));
}

(📸)

2. 생성한 DOM 요소의 onclick에 함수를 대입해줍니다.

for(let el of document.getElementsByTagName("div")){
  el.onClick = () => {
      return () => {
        let test = [];
        for(let i=0;i<100000;i++){
          test.push(i);
        }
      }
  }
}

(📸)

3. DOM 요소의 onlcikc에 null을 대입합니다.

for(let el of document.getElementsByTagName("div")){
  el.onClick = null;
}

(📸)

더 나은 측정방법을 찾지못해, Chrome Debugger의 Memory의 스냅샷 크기를 비교해보았습니다. Performance에서 그래프로 예쁘게 뽑아보려 했지만, 변동이 없더라구요.. 하지만 생각과 다르게 onclick에 함수를 대입하기 전으로 돌아가지는 못했습니다...