JavaScript 简单函数(e)答案

【问题标题】：JavaScript simple function(e)JavaScript 简单函数(e)
【发布时间】：2021-12-06 16:25:22
【问题描述】：

有人能解释一下为什么在括号中没有参数时函数不起作用吗？我的意思是“按钮”和“e”。在我看来，既然为每个“btns”元素编写了一个函数，它应该自动引用它。

const btns = document.querySelectorAll('.question-btn');

btns.forEach(function(button){
    button.addEventListener('click', function(e){
        const question = e.currentTarget.parentElement.parentElement;
        question.classList.toggle('show-text');
    })
});

【问题讨论】：

"...当括号中没有参数时？" 你是什么意思？
问题似乎是“为什么函数不自动从松散变量中推断出它们的参数”。这将如何运作？为什么这是预期或有益的？

标签： javascript function

【解决方案1】：

如果你的意思是你不明白为什么在参数列表中需要button 和e 而不能只拥有：

const btns = document.querySelectorAll('.question-btn');

btns.forEach(function(/*no `button` here*/){
    ???.addEventListener('click', function(/*no `e` here*/){
        const question = ???.currentTarget.parentElement.parentElement;
        question.classList.toggle('show-text');
    })
});

...那么答案就是上面的???。 button 参数¹是 forEach 回调代码如何引用通过调用 forEach 回调处理的特定按钮（forEach 在调用回调时作为参数传递给回调的按钮）；没有它，它就没有任何用处。同样，e 参数是事件处理程序代码如何引用它正在处理的事件（浏览器中的事件系统调用函数的事件参数）。

这可能是一个更简单的按钮示例：

function setUpHandler(button) {
    button.addEventListener("click", function() {
        console.log("Clicked!");
    });
}

const btn1 = document.getElementById("btn1");
setUpHandler(btn1);
const btn2 = document.getElementById("btn2");
setUpHandler(btn2);

<input type="button" class="question-btn" id="btn1" value="Button 1">
<input type="button" class="question-btn" id="btn2" value="Button 2">

对setUpButton 的两次调用就像我们这样做时forEach 对它的两次调用一样（除了forEach 还会传递更多参数[索引和列表] setUpHandler 只是忽略，因为它没有声明参数来接收它们）：

document.querySelectorAll(".question-btn").forEach(setUpHandler);

setUpHandler 中的button 是函数接收第一个参数的参数。

¹ 简要说明一下“参数”和“参数”这两个术语，因为它们出现在上面：

function add(a, b) {
//           ^−−^−−−−−−−−−−−−−−− "parameters"
    return a + b;
}
const sum = add(1, 2)
//              ^−−^−−−−−−−−−−−− "arguments"
console.log(sum);

参数是函数用来引用在调用时传递给它的参数的命名事物（如变量）。上面的参数是a和b。参数是值1 和2。（我们还传递了console.log 一个参数：sum。）

【讨论】：