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