this和$(this)和使用jQuery的事件回调函数之间的区别 [英] Difference between this and $(this) and callback function on event using jQuery

问题描述

学习jQuery，我有两个问题.我想知道为什么这行不通:

Learning jQuery and I have a couple of questions. I am wondering why this won't work:

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

但这会:

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

而且，这为什么起作用:

And also, why is this working:

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

但不是这样:

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

谢谢

推荐答案

this和$(this):

在第一个示例中，this是一个节点元素，并且由于节点元素没有名为text的函数，因此代码将引发错误！

this and $(this):

In the first example, this is a node element, and since node elements don't have a function called text, the code will throw an error!

在第二个示例中，您将节点元素this包装在jQuery对象中，jQuery对象确实具有一个名为text的函数，该函数返回该jQuery对象包装中第一个包装的元素的文本内容，因此该代码可以正常工作.

In the second example, you're wrapping your node element this in a jQuery object, jQuery objects does have a function called text that return the text content of the first wrapped element in that jQuery object wrap, so the code works fine.

要监听事件，您必须传递对函数的引用，该函数将在事件发生时稍后执行(因此称为回调).

When you want to listen to an event you have to pass in a reference to a function that will be executed later when the event happens (hence the name callback).

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

In the first example, you are not passing a reference to a function, you're passing the returned value of the call to alert which is undefined. The first example is the same as:

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

这是错误的，因为当事件发生时，事件侦听器将尝试调用传入的函数，只是发现传入的是undefined.

which is wrong, because when the event occurs, the event listener will try to call the function passed in only to find that what got passed in is undefined.

在第二个示例中，您正在定义一个函数，并将对该函数的引用传递给事件侦听器.因为在JS中您可以执行以下操作:

In the second example, you are defining a function and passing a reference to it to the event listener. Because in JS you can do this:

var referenceToAFunction = function() {

}

，那么代码与此等效:

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

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

Why is the first example working, and the second not?

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

Well in the first example a popup will show up whatever the event is, even this:

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

因为就像我所说的那样:

because it's as I said equivalent to this:

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还是会弹出！

由于 此 .在document上没有发生称为load的此类事件.使用以下替代方法之一:

The second doesn't work because of this. There is no such event called load that happens on the document. Use one of these alternatives:

$(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加载之前就出现的，但事实并非如此！

Just note that in the first example, the alert execution is not bound to any event. Depending on where it is in the DOM, I'd say that 99% it is executed before the DOM is actually ready (so the whole point of event listenening is missing). It happens so fast that you think that it showed up right before the DOM is loaded, but it doesn't!

这篇关于this和$(this)和使用jQuery的事件回调函数之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！