如何使用在 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");
});