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")   
    }
};

如果单击该按钮，则返回“良好编程”。但是，使用我的按钮上的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。

Answer 2

匿名函数

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

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

tro函数（必须在被调用之前声明）

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

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

如何将Event Listener添加到函数表达式中

2 个答案: