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（）时发生的事件。所以基本上它会为按钮注册一个监听器以触发click事件，然后执行你告诉它的代码。

Answer 2

这取决于浏览器。

如果您使用的浏览器支持addEventListener()，则会使用该浏览器添加处理程序。

虽然我很确定他们实际上是在附加一个首先修复/规范化event对象的函数，然后检查DOM元素是否为jQuery12345...属性，并在{{{{}}中查找处理程序1}}并调用它。

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

jQuery.cache

然后，如果您从jQuery1296081364954: 1将该号码记录到控制台，您将看到相关数据。

jQuery.cache

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

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

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

Answer 3

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

在简单的javascript中，它就像

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