JavaScript에서 Onclick 함수의 조기 실행을 방지하는 방법

클릭 전 Onclick 함수 실행: Javascript의 일반적인 함정

Javascript에서는 onclick 함수를 사용하여 클릭 시 HTML 요소에 작업을 할당할 수 있습니다. 그러나 개발자는 요소 생성 시 클릭하기도 전에 함수가 즉시 실행되는 문제에 직면하는 경우가 많습니다.

제공된 Javascript 코드에서 개발자는 요소를 클릭하는 대신 클릭하면 함수를 트리거하는 링크를 생성하는 것을 목표로 합니다. 새 페이지로 리디렉션 중입니다. 그러나 잘못된 할당 방법으로 인해 onclick 함수(secondFunction)가 즉시 호출됩니다.

오류는 다음 줄에 있습니다.

<code class="js">sentNode.setAttribute('onclick', secondFunction());</code>

여기서는 secondFunction()이 직접 호출됩니다. , 이는 함수가 정의되자마자 실행된다는 의미입니다. 이 문제를 해결하려면 다음과 같이 할당해야 합니다.

<code class="js">sentNode.setAttribute('onclick', secondFunction);</code>

괄호 없이 함수를 참조하여 코드는 반환 값이 아닌 함수 자체를 할당합니다. 이렇게 하면 onclick 이벤트가 발생할 때만 함수가 실행됩니다.

올바른 코드는 다음과 같습니다.

<br>function startFunction() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var sentNode = document.createElement('a');
sentNode.setAttribute('href', "#");
sentNode.setAttribute('onclick', secondFunction); // Assign function reference
sentNode.innerHTML = "Sent Items";

// Add new element to parent
var parentNode = document.getElementById('parent');
var childNode = document.getElementById('sendNode');
parentNode.insertBefore(sentNode, childNode);