如何为函数表达式添加事件监听器？按钮点击事件实现疑问

Let's start by recapping your original setup to set context:

Your original HTML:

<button id="btn">Click Me</button>

Original JavaScript (which shows "Good Programming" on first click since trial is undefined):

var trial;
document.getElementById("btn").addEventListener("click", tro);
function tro() {
  if (trial == undefined) {
    alert("Good Programming");
  } else {
    alert("Bad Programming");
  }
}

To replicate this behavior using an anonymous function directly in the onclick attribute, you can embed the same logic inside an anonymous function that runs when the button is clicked. Here's how to do it:

Option 1: Matching the Original Global Variable Setup #

This keeps trial as a global variable (just like your original code), so subsequent clicks will react if you modify trial later:

<button id="btn" onclick="(function() {
  if (trial == undefined) {
    alert('Good Programming');
  } else {
    alert('Bad Programming');
  }
})()">Click Me</button>

<script>
var trial; // Global variable, same as your original code
</script>

The anonymous function here wraps the exact same conditional logic as your tro function. When the button is clicked, the anonymous function is executed immediately, checking the global trial variable and showing the appropriate alert.

Option 2: Inline Logic (Simpler, Still Uses Anonymous Function Behavior) #

You can also write the logic directly in the onclick attribute without explicitly wrapping it in a function (since the onclick handler acts as an implicit function body):

<button id="btn" onclick="if (trial == undefined) { alert('Good Programming'); } else { alert('Bad Programming'); }">Click Me</button>

<script>
var trial;
</script>

A Quick Note on Best Practices #

While using inline onclick works for simple cases, modern JavaScript generally prefers using addEventListener (like your original code) because:

• It lets you attach multiple event listeners to the same element without overwriting existing ones.
• It keeps your HTML structure cleanly separated from your JavaScript logic (separation of concerns).
• It offers more flexibility with event handling (like capturing/bubbling phases).

But if you specifically need to use an anonymous function with the onclick attribute, the first option above is a direct equivalent to your original code.

内容的提问来源于stack exchange，提问作者Uchenna Ajah