如何使用在addEventListener中起作用的参数创建函数？

Question

我对此很陌生。我想在JavaScript中创建一个函数，该函数将允许我通过切换单选按钮并使用addEventListener来更改CSS主体中的线性渐变背景属性。我想出了这样的东西：（color1和color2是html中的颜色输入，radio1是四个单选按钮之一）var color1 = document.querySelector(".color1");var color2 = document.querySelector(".color2");function gradientPosition(x) {    return body.style.background =    "linear-gradient(to " + x +","    + color1.value     + ", "    + color2.value    + ")";}当我在控制台中键入并添加参数之一（即）时，此方法有效。 gradientPosition("top");。我的问题是，当我将它与addEventListener一起使用时，它不起作用：radio1.addEventListener("click", gradientPosition("top"));我猜这是因为te click本身正在调用该函数，而参数“ top”将不起作用？此类问题的解决方案是什么？还是在这种情况下我应该只在监听器中使用匿名函数？

Answer 1

您在调用函数，而不是传递有效的处理程序。您的方法实际上是通过以下字符串作为处理程序传递的：

"linear-gradient(to " + x +"," + color1.value + ", " + color2.value + ")";

您应该遵循以下方法：

radio1.addEventListener("click", function(e) {

    gradientPosition("top");

});