JQuery的.click()如何在幕后工作？

Question

这个问题只是出于好奇.我想知道jquery的.click()是如何在幕后工作的.

例如,如果我创建一个按钮:

<input type="button" id="myButton" value="Click me!" />

然后我有以下jquery代码:

$('#myButton').click( function() {
    alert("I have been clicked.");
});

jquery如何使它在单击按钮时调用我的函数？

起初我以为它会将onClick=""属性添加到按钮的标签中,但是当我用Firebug检查页面时,我刚刚看到:

<input type="button" id="myButton" value="Click me!" />

那么jquery在幕后做什么呢？

Answer 1

这将取决于浏览器。

如果您使用的浏览器支持addEventListener()，他们会使用它添加一个处理程序。

尽管我很确定他们实际上附加了一个函数，该函数首先修复/规范化event对象，然后检查属性的 DOM 元素jQuery12345...并查找处理程序jQuery.cache并调用它。

如果将元素记录到控制台，您将看到一个类似于以下内容的属性：

jQuery1296081364954: 1

然后，如果您从 将该号码记录到控制台jQuery.cache，您将看到关联的数据。

console.log(jQuery.cache[1]);

...这将给出这样的结构：

{
   events:{
      click:[
         { /* object containing data relevant to the first click handler */ }
      ]
   },
   handle:{ /* this may be what initially gets called. Not sure. */ }
}

因为 jQuery 确实规范了事件对象，所以它并不像为您分配一个处理程序并调用它那么简单。我相信它也是通过缓存完成的，以避免旧浏览器中的内存泄漏。