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

使用 DOM 事件模型，这也是添加 onClick() 时发生的情况。所以基本上它为按钮注册一个监听器以触发点击事件，然后执行你告诉它的代码。

Answer 2

这取决于浏览器。

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

虽然我很确定他们实际上附加了一个函数，该函数首先修复/规范化 event 对象，然后检查 jQuery12345... 属性的 DOM 元素并在 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 确实对事件对象进行了规范化，所以它并不像为您分配一个处理程序并调用它那么简单。我相信它也是通过缓存来完成的，以避免旧浏览器中的内存泄漏。

Answer 3

该函数附加到您输入的 onclick 事件，但不使用 html 声明，而是使用纯 javascript。与其查看 html 代码，不如查看 firebug 中的 DOM 选项卡，您应该在那里找到它。

在普通的 javascript 中是这样的

    document.getElementById('myButton').addEventListener('click',function () { alert('hello!');},false);