Question

使用.on（＆＃39; click＆＃39;，）事件，根据我是否提供匿名vs命名函数（命名函数不起作用），我会得到不同的行为。这是语法错误吗？

<div id="myID"> abc </div>

<script>
  $("#myID").on('click',function(e){
            console.log(e.type);
  }); //works

  function handle(e){
    console.log(e.type);
  }

  $("#myID").on('click',handle(e)); //doesn't work

</script>

Answer 1

您需要替换

 $("#myID").on('click',handle(e));

与

 $("#myID").on('click',handle);

Answer 2

调用函数时，会立即执行。当你这样做时会发生这种情况

$("#myID").on('click',handle(e));

您调用该函数，传递一个尚不存在的事件e。你想要的是给jQuery一个当用户点击id为myID的元素时应该调用的函数。

这在JavaScript中是可行的，因为它具有一流的功能。这意味着如果您创建这样的函数：

function handle(e){
  console.log(e.type);
}

然后您将获得刚刚创建的函数的引用。此引用存储在名为handle的变量中。如果你这样做，你可以达到同样的目的：

var handle = function (e) { // create a function and store a reference to it in a variable
  console.log(e.type);
};

该函数接受参数e。这还不存在，它必须存在于你调用函数的那一刻：

handle(e); // ReferenceError: e is not defined

您可以将对该函数的引用传递给jQuery，然后jQuery在用户单击元素时调用您的函数。此时，e仍然不存在，因为它将包含有关事件的信息，但尚未发生。它看起来像这样：

$("#myID").on('click', handle); // pass a reference to the handle function to jQuery

现在，handle没有被调用，因为您只传递对该函数的引用。你可以说你将函数作为参数传递给另一个（jQuery）函数。这称为回调函数。

修改

请注意，上面创建的所有函数都以e为参数。在创建函数的那一刻，参数不必存在。但是，当您（或jQuery）调用该函数时，您必须提供一个参数，以便该函数可以完成其工作。

与未命名的函数相同：您创建函数，但参数尚不存在。当你（或jQuery）调用该函数时，你必须提供一个参数。

这意味着没有本质区别。唯一的区别是一个函数有一个名字，另一个函数没有名字。你甚至可以这样做：

$("#myID").on('click', function handle (e) { // pass a reference to the function, but do not call it
  console.log(e.type);
});

...具有与以下相同的效果：

$("#myID").on('click', function (e) { // pass a reference to the function, but do not call it
  console.log(e.type);
});

...除了在第一个示例中，您保留对在名为＆＃34; handle＆＃34;的变量中创建的函数的引用。在第二个示例中，您将丢失对该函数的引用，并且只有jQuery才能使用您的函数。

编辑结束

另一个例子是：

＆＃13;

var testFunction = function (arg) {
  console.log('My argument is:', arg);
};

var executeTwoTimes = function (callback) { // accept a callback function as the first argument
  callback('foo'); // execute the callback function
  callback('foo');
};

executeTwoTimes(testFunction); // pass a reference to testFunction
// or:
executeTwoTimes(function (a) { // pass a reference to an anonymous function 
  console.log(a + ' bar');
});

＆＃13;

我希望我能让你的事情更清楚。

单击时调用jQuery事件处理程序：匿名vs命名函数行为

2 个答案:

修改