更好地理解JavaScript参数

Better understanding JavaScript parameters

本文关键字:JavaScript 参数 更好      更新时间:2023-09-26

我不明白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新手,所以任何简单的答案都会很感激。

在"click"事件中被调用的函数是一个"回调"函数。一旦事件"click"引发,则匿名"回调"函数"function(event){"将立即被调用,参数为"event"。为了确定将与匿名函数一起调用的参数,您应该参考文档。找到参数后,您可以在此函数中使用和使用它们,例如添加"event.preventDefault();Alert ('test')",当你点击元素时什么也不会发生,只会弹出一个带有"test"的窗口。

请不要犹豫问任何问题,这样我可以改进我的回答。

此函数也称为回调。回调就是将一个函数作为参数传递给另一个函数。

尝试测试此代码,然后单击页面上的任何地方:

window.addEventListener("click", click);
function click() {
    console.log(arguments);
}

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

下面是一个类似的例子:

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
}