JavaScript onclick 함수가 너무 일찍 트리거됨

태그와 유사한 미학적 링크를 생성하지만 클릭 시 함수를 실행하려는 경우 , 사용자는 페이지 로드 시 함수가 잘못 호출되는 시나리오를 접할 수 있습니다. 이는 원하는 클릭 이벤트가 올바르게 작동하는 것을 방해합니다.

일반적인 함정은 onclick 속성을 할당할 때 괄호를 부적절하게 사용하는 것입니다. 함수를 즉시 실행하는 sentNode.onclick = secondFunction() 대신 올바른 구문은 sentNode.onclick = secondFunction입니다. 이는 클릭 이벤트 시에만 실행되는 함수에 대한 참조를 할당합니다.

function startFunction() {
  var sentNode = document.createElement('a');
  sentNode.setAttribute('href', "#");
  sentNode.setAttribute('onclick', secondFunction);
  //sentNode.onclick = secondFunction();
  sentNode.innerHTML = "Sent Items";
  //...
}

괄호를 생략하면 onclick 이벤트가 실행 결과가 아닌 함수 참조에 올바르게 바인딩되어 의도한 동작이 보장됩니다.