this 和 $(this) 之间的区别以及使用 jQuery 的事件回调函数

Question

学习 jQuery，我有几个问题。我想知道为什么这不起作用：

$('li').html(function(){
  return '<em>' + this.text() + '</em>';
});

但这会：

$('li').html(function(){
  return '<em>' + $(this).text() + '</em>';
});

还有，为什么会这样：

$(document).on('load', alert('done'));

但不是这个：

$(document).on('load', function(){alert('done');
});

谢谢，

Answer 1

这个和$（这个）：

在第一个示例中，this 是一个节点元素，由于节点元素没有名为 text 的函数，因此代码会抛出错误！

在第二个示例中，您将节点元素 this 包装在 jQuery 对象中，jQuery 对象确实有一个名为 text 的函数，它返回该 jQuery 对象包装中第一个包装元素的文本内容，所以代码运行良好。

回调：

当你想监听一个事件时，你必须传入一个函数的引用，该函数将在事件发生后执行（因此称为回调）。

在第一个示例中，您没有传递对函数的引用，而是将调用的返回值传递给alert，即undefined。第一个例子同：

var alertResult = alert('done');
// alertResult === undefined
$(document).on('load', alertResult);

这是错误的，因为当事件发生时，事件监听器会尝试调用传入的函数，却发现传入的是undefined。

在第二个示例中，您正在定义一个函数并将对它的引用传递给事件侦听器。因为在 JS 中你可以这样做：

var referenceToAFunction = function() {

}

然后代码等价于：

$(document).on('load', referenceToAFunction);

编辑：

为什么第一个示例有效，而第二个无效？

在第一个示例中，无论事件是什么，都会弹出一个弹出窗口，即使是这样：

$(document).on('MrChocolatIsDeadOrCaptured', alert('done'));

因为就像我说的那样：

var alertResult = alert('done'); // this executed right away
$(document).on('MrChocolatIsDeadOrCaptured', alertResult); // the alert is already poped up and closed now we are setting an event listener using the alert result

所以alert 无论如何都会弹出来！

由于this，第二个不起作用。在document 上没有发生名为load 的此类事件。使用以下替代方法之一：

$(document).on("DOMContentReady", function() { ... }); // the right event
$(document).ready(function() { ... });                 // shortcut of the above
$(function() { ... });                                 // shortcut of the shortcut (only for the ready event)

请注意，在第一个示例中，alert 执行未绑定到任何事件。根据它在 DOM 中的位置，我会说 99% 它是在 DOM 实际准备好之前执行的（因此缺少事件侦听的全部意义）。它发生得如此之快，以至于您认为它在 DOM 加载之前就出现了，但事实并非如此！