简单解释Javascript函数参数?

时间:2017-05-23 20:18:29

标签: javascript

前言
这没有帮助: enter image description here 这没有帮助: https://www.w3schools.com/js/js_functions.asp

这没有帮助: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

请不要问/告诉我搜索论坛,我做了。我还搜索了谷歌。我查看了我能找到的每一份文件,并且(大约三年)一直无法理解这一点,(我敢肯定)相当简单的概念。

问题
我理解函数参数的基本用法,例如:

function myFunction(x) {
  var result = x * 2;
    console.log(result)
}
myFunction(4);

我一直都明白这种用法。我用 NOT 理解的用法是:

$("a").click(function(event){
    event.preventDefault();
});

该变量似乎来自无处。我知道当你将变量用作参数时,变量基本上是声明/定义的,但是该函数到底发生了什么?我知道最终结果是什么,但是如何通过使用“事件”来实现。 什么是事件 ?? 它的价值是什么?

我在网上看过的所有东西都只解释了参数的第一次使用,这很容易。第二次使用的任何帮助,我都明白它们实际上是以相同的方式使用,我们将不胜感激!

4 个答案:

答案 0 :(得分:6)

$("a").click(function(event){
    event.preventDefault();
});

传递给函数click的参数本身就是一个函数。它看起来像这样:

function(event){
        event.preventDefault();
}

所以event是通过任何函数调用传递给该函数的参数。当在目标元素上发生单击事件时,该函数调用jQuery。

如果您查看click的文档,您会看到:

  

.click(handler)

     

处理程序

     

类型:Function(Event eventObject)A   每次触发事件时执行的函数。

所以你传递的函数是handler。处理程序是一个函数,它接受eventObject(你简称为event,这很好 - 这里没关系)Event

类型的参数

简单地说,你不必担心如何调用该函数。库将在适当的时候调用它,并将适当的对象作为event传递给该函数。您需要担心的是该处理程序中的操作可能涉及或可能不涉及实际使用event

您传递给click的函数是匿名的,这可能让您感到困惑。它没有名字。如果有帮助,你可以这样做:

 function MyClickHander(event) {
     // do something here
 }

 $("a").click(MyClickHandler);

基本相同。但是人们通常更喜欢使用匿名函数,而不是为他们可能需要担心的所有各种事件编写可能的数十个命名处理函数。

编辑:

也可以考虑如何编写一个将函数作为参数的函数(例如,一个接受回调的函数):

function Foo(callback) {
    bar = someValue;
    callback(bar);
}

你可以这样使用:

Foo(function(bar) {
    console.log(bar);
});

所以此处bar来自内部 Foo - 就像event来自内部 click一样。您不必担心完全 click event中的位置(尽管您可以通过源代码深入研究),jQuery文档告诉您click将对handler做什么,所以您不必这样做。

答案 1 :(得分:2)

您作为第二次使用所显示的内容'是jQuery事件函数的一种非常常见的形式。您要求我们不要向您提供文档,但坦率地说,您一直在阅读错误的文档。

事件'变量'实际上是event object。我将分析以下示例。

以下是从文档中直接撕掉的东西:

// Access the `dataTransfer` property from the `drop` event which
// holds the files dropped into the browser window.
var files = event.originalEvent.dataTransfer.files;

要解决您发布的具体用法,例如preventDefault()here's the documentation,以及其他示例:

  

说明:如果调用此方法,则不会触发事件的默认操作...例如,单击的锚点不会将浏览器带到新的URL。我们可以使用event.isDefaultPrevented()来确定此方法是否已被此事件触发的事件处理程序调用。

     

示例:取消点击的默认操作(导航)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.preventDefault demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>

<script>
$( "a" ).click(function( event ) {
  event.preventDefault();
  $( "<div>" )
    .append( "default " + event.type + " prevented" )
    .appendTo( "#log" );
});
</script>
</body>
</html>

假设您还没有完全放弃尝试自己学习,这里有一个很好的链接可以解释实施: https://api.jquery.com/category/events/event-object/

答案 2 :(得分:2)

函数是javascript中的一等公民。所以你可以传递它们并将它们分配给变量。不要将它们视为控制结构,而应视为事物本身。对于单击侦听器,您传递的参数实际上是函数。你告诉jQuery库“这是一个我想让你在点击发生时调用的函数。” jQuery文档承诺,在它调用你的函数时,它将使用 event 的参数调用它。

也许它可以帮助您以这种方式查看代码:

var callMeOnClick = function(event){
    console.log(event);
};//nothing has happened yet. The function is being assigned to a variable, not invoked.
$("a").click(callMeOnClick);//giving the function to jQuery to execute later.

我想我理解你提出的问题,我只是不确定如何解释它。我希望这有点帮助。

答案 3 :(得分:2)

我输入了一个关于回调函数的长期技术定义,但是让我告诉你这个。

每当有人点击#StudyID SubjectID Id # 1 1 1 # 1 2 2 # 1 3 3 # 1 4 4 # 1 5 5 # 2 1 6 # 2 2 7 # 2 3 8 # 2 4 9 # 2 5 10 # 3 1 11 # 3 3 13 # 3 4 14 # 3 5 15 # 4 1 16 # 4 2 17 # 4 3 18 # 4 4 19 # 4 5 20 # 5 1 21 # 5 2 22 # 5 3 23 # 5 4 24 # 5 5 25 时,间谍就会打电话给您的手机并提供有关此次点击的详细信息。

你打算怎么处理这些信息?

  • 间谍是jQuery
  • 您的手机是您提供的功能声明
  • 有关点击的信息为a
  • 你打算怎么处理这些信息?这是你在函数体中写的任何内容。