更好地理解JavaScript参数

Question

更好地理解JavaScript参数

4

我不理解有关参数的JavaScript代码的某些部分。我在W3schools上找到了这个例子：

<!DOCTYPE html>
<html>
<body>

<a id="myAnchor" href="http://w3schools.com/">Go to W3Schools.com</a>

<p>The preventDefault() method will prevent the link above from following the URL.</p>

<script>
document.getElementById("myAnchor").addEventListener("click", function(event){
    event.preventDefault()
});
</script>

</body>
</html>

我对函数内的event参数感到困惑。尽管event参数没有成为一个实参，也就是说，它没有任何值，但这段代码仍然能够正常运行。这个“空”的参数如何与方法一起使用？为什么这段代码能够工作？我是JavaScript的新手，希望得到简单的答案。

- Slit

当浏览器调用该函数时，它会传递参数的值。 - Pointy

@Pointy：什么样的值？ - Slit

浏览器将传递一个事件对象。该代码正在设置事件处理程序。 - Pointy

如果我不将事件作为参数传递，通常我会在IE浏览器中遇到问题... - DZanella

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Lizik · Answer 1

这个函数也被称为回调函数。回调函数是指将一个函数作为参数传递给另一个函数。

尝试测试这段代码，然后在页面上任意点击：

window.addEventListener("click", click);

function click() {
    console.log(arguments);
}

如果您打开控制台，应该会看到[MouseEvent]。特殊的arguments对象返回函数接收到的所有参数。由于窗口方法addEventListener向事件处理程序发送事件，因此click函数仅接收一个参数MouseEvent。

以下是类似的示例：

init("abc", logArgs); //--> "abc"
init("abc", logDog); //--> "dog"

function logArgs(x) {
    console.log(x);
}

function logDog(x) {
    console.log("dog");
}

function init(x, callback) {
    callback(x);
}

混乱的部分是您可以将匿名函数发送给一个函数。匿名函数是没有名称的函数。使用上面的示例，您可以这样做：

init("abc", function(y) { //the y parameter comes from the init function
    console.log(y); //"abc"
});

function init(x, callback) {
    callback(x); //send the first argument to the anonymous function
}

- Oleksandr Nykytenko · Answer 2

嗨，

被调用的函数是一个“回调”函数，与“click”事件相关。当“click”事件被触发时，匿名“回调”函数“function(event){}”会立即带上1个参数“event”被调用。为了确定将使用哪些参数调用匿名函数，您应该参考文档。找到参数后，您可以在此函数内使用和处理它们，例如添加 “event.preventDefault(); alert('test')"，这样单击元素时不会发生任何事情，只会弹出窗口显示“test”。

如果您有任何问题，请随时提问，以便我改善我的答案... 我只是试图以高层次的方式解释。