javascript - 这段代码是如何工作的？

Question

几分钟前我正在查看一些代码，这让我感到困惑。

$("nav a").mouseenter(function() {
  audio.play();
});

我知道 '$' 是 jQuery for document.getElementById(""); mouseEnter 是“nav a”的事件处理程序，但函数是如何分配给事件的？它没有任何赋值运算符'='？

我现在对 jQuery 不太了解，因为我正试图完全降低 JavaScript。因此，当我将代码修改为纯 JavaScript 时，它似乎不起作用......

document.getElementById("playAudio").onclick(function () {
   audio.play();
});

我不明白为什么？我想这是相同的代码？...

Answer 1

mouseenter 是一个函数。如同：

var element = {elm: document.getElementById('test')};
element.mouseenter = function(func) {
    element['elm'].addEventListener('mouseenter', func);
};
element.mouseenter(function() {});

Answer 2

您将一个函数对象（使用函数表达式创建）传递给jQuery.mouseenter，然后 jQuery 从那里获取它。

仅供参考，您在这里尝试了解的部分内容是文档对象模型 (DOM)。您正在尝试使代码成为纯 JavaScript + DOM API。学习 JS 和 DOM 的基础知识很好，但要注意 jQuery 消除了浏览器实现 DOM 中的许多不一致之处，例如注册事件侦听器。

Answer 3

该函数被传递，并且该函数是匿名的（没有名称）。

你也可以这样做：

function foo() { audio.play(); }

$('nav a').mouseenter(foo);

Answer 4

美元符号不仅限于getElementById()，它是 jQuery 对象，在您的情况下，它是调用nav元素然后a在nav. 抓取元素后，它会匿名附加事件，允许函数在事件触发时运行。