javascript - JS中带参数的函数需要加参数吗

Question

来自Java并尝试学习Javascript，以下代码有效：

const myCustomDiv = document.createElement('div');

function respondToTheClick(evt) {
    evt.target.textContent = 'This paragraph has been clicked!'; 
}

for (let i = 0; i < 100; i++) {
    const newElement = document.createElement('p');
    newElement.textContent = 'This is paragraph number ' + i;

    myCustomDiv.appendChild(newElement); 
}

document.body.appendChild(myCustomDiv);

myCustomDiv.addEventListener('click', respondToTheClick);

以下不是并给出错误

const myCustomDiv = document.createElement('div');

function respondToTheClick(evt) {
    evt.target.textContent = 'This paragraph has been clicked!';
}

for (let i = 0; i < 100; i++) {
    const newElement = document.createElement('p');
    newElement.textContent = 'This is paragraph number ' + i;

    myCustomDiv.appendChild(newElement);
}

document.body.appendChild(myCustomDiv);

myCustomDiv.addEventListener('click', respondToTheClick(event) );  //<--added event argument

产生的错误是：

参数类型 void 不可分配给参数类型 (this:HTMLDivElement, ev: HTMLElementEventMap[string]) => any

对于 Java，如果一个方法需要一个参数 - 它必须被提供。JS不是这种情况-如果是这样，它是如何工作的？还是只有 eventListeners 的情况？

标签： javascriptfunctionparametersarguments

Answer 1

在 JavaScript 中，函数是一流的对象。你可以对一个函数做任何你可以对一个对象做的事情。这包括将其作为函数的参数传递。

addEventListener("click", respondToTheClick)

respondToTheClick…作为 的第二个参数传递addEventListener。

addEventListener('click', respondToTheClick(event) );

相当于：

let return_value = respondToTheClick(event);
addEventListener('click', return_value);

的第二个参数addEventListener需要是一个函数。的返回值respondToTheClick(event)不是函数。这就是为什么你得到一个错误。

当浏览器和函数内部的一些其他代码addEventListener调用您作为参数传递给它的函数时，该代码会将事件对象作为参数传递给它。

function handleEvent(e) {
    console.log(e);
}

function addEventDemo(event_type, event_handler) {
    event_handler("E is " + event_type);
}

addEventDemo("click", handleEvent);

---

也就是说，JS 不需要您将参数传递给函数，即使它被设置为将它们分配给变量。任何您未定义的获取值undefined。

function foo(a, b, c, d) {
    console.log({ a, b, c, d });
}

foo(1, 2);

但是虽然 JS 不需要它，但函数可以强制执行。

function foo(a, b, c, d) {
    if (typeof a !== "number") throw "a is not a number";
    if (typeof b !== "number") throw "b is not a number";
    if (typeof c !== "number") throw "c is not a number";
    if (typeof d !== "number") throw "d is not a number";
    console.log({ a, b, c, d });
}

foo(1, 2);