Why Does JavaScript onclick Function Trigger Prematurely When Parentheses Are Used?

JavaScript onclick Function Triggered Prematurely

When creating a link with similar aesthetics to an tag but intended to execute a function upon click, users may encounter a scenario where the function is erroneously called upon page load. This precludes the desired click event from functioning correctly.

The common pitfall is the improper use of parentheses when assigning the onclick attribute. Instead of sentNode.onclick = secondFunction(), which immediately executes the function, the correct syntax is sentNode.onclick = secondFunction. This assigns a reference to the function, which will only be executed upon the click event.

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

By omitting the parentheses, the onclick event is correctly bound to a function reference and not the result of its execution, ensuring the intended behavior.

The above is the detailed content of Why Does JavaScript onclick Function Trigger Prematurely When Parentheses Are Used?. For more information, please follow other related articles on the PHP Chinese website!