javascript - 如何像jquery一样自动调用Javascript中的函数

Question

我一直在尝试了解 jQuery 是如何工作的。例如，假设您想在单击锚标记时执行某些操作。以下面的代码为例：

$('.selector').click

References jQuery但是"$"jQuery 如何知道它应该('.selector')在 DOM 中查找和查找？那么 jQuery 是如何自动知道"click"在匹配的元素上运行以下方法的呢？

Answer 1

$是一个函数。你正在传递它的('.selector')论点。这就是它知道要获取什么的方式。

然后它返回一个jQuery填充了找到的 DOM 元素的对象。该jQuery对象上有方法。

当您调用.click()jQuery 对象时，它会遍历它所持有的匹配的 DOM 元素，并执行预期的操作。

---

这是一个非常简单的例子。

var $ = function(selector) {
    return new jQuery(selector);
}

function jQuery(selector) {
    var elems = document.querySelectorAll(selector);
    this.length = [].push.apply(this, elems);
}
jQuery.prototype.click = function() {
    for (var i = 0; i < this.length; i++)
        console.log("clicking", i, this[i].nodeName);
    return this;
}

Answer 2

它基本上为所选元素上的该事件注册一个事件处理程序。事件处理程序是您的浏览器处理的事情，它在注册点击时调用处理程序。JQuery 只是以一种对用户更友好的方式设置它。

另请注意click()与 不同click(function(){})，第一个实际上调用单击，就好像您只是鼠标单击该项目一样，第二个实际上是一个事件处理程序，在执行单击时调用您的函数。