javascript - 如何将事件监听器添加到函数表达式

Question

在我的 html 代码中，我有一个按钮

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

和 JavaScript 代码:

var trial;

document.getElementById("btn").addEventListener("click", tro)

function tro() { 
    if (trial == undefined) {
        alert("Good Programming") 
    }
    else {
        alert("Bad Programming")   
    }
};

如果单击该按钮，它将返回“goodprogramming”。但是，通过按钮上的 onclick 属性，即使在匿名状态下，我也可以控制该函数并获得相同的结果

<button id="btn" onclick="tro()">

Javascript代码:

var trial;

var x = function() { 
    if (trial == undefined) {
        alert("Good Programming") 
    }
    else {
        alert("Bad Programming") 
    }
};

但是对函数表达式使用 addEventListener(不带 onclick 属性)不会执行任何操作:

var trial;

document.getElementById("btn").addEventListener("click", tro)

var x = function() { 
    if (trial == undefined) {
        alert("Good Programming") 
    }
    else {
        alert("Bad Programming") 
    }
};

如何将事件处理程序添加到将成功执行代码的函数表达式中。

Answer 1

此时 tro 函数尚未定义。尝试在 addEventListener 调用之前声明它并使用 x 变量:

var trial;

var x = function tro() { 

  if (trial == undefined) {
    alert("Good Programming") 
  } else { 
    alert("Bad Programming") 
  }

}

document.getElementById("btn").addEventListener("click", x);

为什么必须使用x变量？因为在分配函数时为函数命名并不等同于拥有对函数对象的引用。您只是为其指定了名称，但没有对它的引用。引用将是 x 变量。

这里有一个codepen .