使用“this”关键字对整个选择进行jquery点击事件

Question

假设你有一个像这样的图片库：

<div id="gallery">
<a href="images/one_sb.JPG"><img src="images/one_s.jpg" /></a>
<a href="images/two_sb.JPG"><img src="images/two_s.jpg" /></a>
<a href="images/three_sb.JPG"><img src="images/three_s.jpg" /></a>
<a href="images/four_sb.JPG"><img src="images/four_s.jpg" /></a>
<a href="images/five_sb.JPG"><img src="images/five_s.jpg" /></a>
<a href="images/six_sb.JPG"><img src="images/six_s.jpg" /></a>
</div>

并且您希望将事件处理程序绑定到每个单独的图像。此事件处理程序将成为图像库机制的一部分，该机制使用缩略图从小图像切换到大图像。

部分代码：

$('#gallery a').click(function(evt) {
    //don't follow link
     evt.preventDefault();
     //get path to new image
   var imgPath = $(this).attr('href');
     //get reference to old image
     etc...

}); // end click

根据我的理解$()执行：“jQuery returns the elements in a collection”本质上它会返回所有标记为“gallery”id的子项

如果$（）返回一个集合，而不是为什么通过使用“click”事件处理程序来迭代该集合，我们可以引用被“this”点击的当前元素？我们不需要使用“each（）”方法来迭代使用$('#gallery a')返回的jQuery对象

对此问题的任何jQuery文档的引用都将不胜感激。

Answer 1

隐式迭代

调用$函数：

$('#gallery a')

...您正在传递选择器字符串，并返回所有匹配的<a>元素。大多数jQuery方法将自动遍历集合，并执行预期的任务。

因此，这会迭代<a>元素，并为每个元素分配处理程序。

$('#gallery a').click(function(evt) {...

这通常称为隐式迭代。

---

将元素传递到$函数

当最终调用处理程序以响应浏览器事件时，您正在单独调用$函数，而这次，而不是选择器字符串，您正在传递{{1} }，恰好被设置为被点击的元素。

this

所以它仍然会返回一个集合，但集合中只有一个元素;你通过的那个。

---

$(this).attr(... 是如何指向正确的元素的？

this最终指向被点击的元素的方式是事件处理程序的默认行为。因此，在绑定到元素的实际处理程序中，this是单击元素的值。

您可以通过旧方式绑定处理程序来确认这一点。

this

您会看到document.body.onclick = function() { alert(this.tagName); }; 是this元素。

所以jQuery的作用是他们在调用它们时手动设置它们收到的body值。这样，处理程序的行为与传统方式一致。

---

次要细节

一边说明，jQuery不使用this来分配处理程序。他们使用element.onclick =。在不支持element.addEventListener的旧IE浏览器中，他们使用.addEventListener()。

在element.attachEvent中，.attachEvent值不指向所点击的元素，因此他们需要实施其他一些技巧才能使其正常工作。

您提供的处理程序实际上从未绑定到该元素。相反，jQuery绑定一个接收元素所有事件的通用代理，将您的实际处理程序存储在this中，然后在事件发生时查找并调用您的处理程序。

Answer 2

事件处理程序中的

this仅指向事件注册的元素，而不是与查询匹配的整个集合。

var links = $('#gallery a').click(function(evt) {
   // this here is only the link that was clicked, 
   // not all the ones that match
   var imgPath = $(this).attr('href');
});

// But the variable links is a reference to all the links.

请注意，您不必调用每个方法来调用jQuery对象的所有元素上的方法。这是它的作用的一部分。如果你正在调用getter，jQuery将只返回第一个的值。