Question

我正在研究Web开发，现在正在做jquery部分。我有一个逻辑问题，以便可以理解语法背后的逻辑，从而可以更好地理解它。

给出以下逻辑：

$(document).ready(function() {
  $("p").on({
    mouseenter: function() {
      $(this).css("background-color", "yellow");
    },
    mouseleave: function() {
      $(this).css("background-color", "pink");
    },
    click: function() {
      $(this).css("background-color", "red");
    }
  })
})

为什么函数会在()之后进入.ready内，而不是像这样的其他任何方法或函数：.ready(){ function should be here? }？我的意思是通常在()中，您给出一组参数而不是代码本身，不是吗？
为什么我必须声明一个匿名函数并且不能简单地将代码放在mouseenter之后？无论如何，它不会在事件发生之前执行，所以为什么我必须声明匿名函数并使用大括号呢？我的意思是为什么我必须这样做：

mouseenter: function() {
  $(this).css("background-color", "yellow");
}

代替此：

mouseenter: $(this).css("background-color", "yellow");

谢谢。

Answer 1

1）为什么函数要放在()之后的.ready里面，而不像下面的任何其他方法或函数那样：.ready(){ function should be here? }？我的意思是通常在()中，您给出一组参数而不是代码本身，不是吗？

这是因为您要向ready事件处理程序提供匿名函数作为参数。事件触发时将调用此函数。这是回调模式，在jQuery中很普遍。

2）为什么我必须声明一个匿名函数并且不能简单地将代码放在mouseenter之后？无论如何，它不会在事件发生之前执行，所以为什么我必须声明匿名函数并使用其他大括号呢？

如果您不将逻辑放入函数中，则会立即调用，因此您的断言不正确。如果以这种方式进行操作，则会将css()调用的结果分配给mouseenter处理程序（这是$(this) jQuery对象，它也会在不同的范围内执行，因此this不是对引发事件的元素的引用，而是对拥有mouseenter键的对象的引用，而不是要运行的函数。这就是您需要将逻辑包装在匿名函数中的确切原因。以便可以在需要时立即执行逻辑。

这两个问题似乎都是由于对匿名函数的使用感到有些困惑。可以将它们声明为变量并照此传递，然后在需要时调用，例如：

var foo = function() {
  console.log('hello');
}

function doSomethingAfter3Seconds(action) {
  setTimeout(action, 3000);
}

doSomethingAfter3Seconds(foo);

了解此逻辑中对匿名函数的需求

1 个答案: