「事件委托的简单使用」

事件委托或许是一个你一直想回避的技术术语,但是如果你还没有使用过,那么这里举了一个例子来展现事件委托简单而又强大的用途。

查看demo

问题

我们已经建立好了页面,运行了所有的jQuery并且绑定好了单击处理事件。但是当产生了新的内容到达页面时,譬如说,通过Ajax请求?那些单击处理事件就不工作了。

我们可以复制点击事件的代码在每次ajax运行以后,但那样是不是感觉重复了?我们希望我们的代码尽可能的遵守DRY原则:避免重复。

难道不能让容器元素监听所有图片的点击事件?绝对可以,这就由事件委托来起作用了。

我们的常规代码看起来像这样:

<!-- all our initial markup, images, etc -->
<script>
// when an image in the pictures list is clicked:
$pictures.find('img').click(function () {
// fade the loading notication in to view
$('#loadingStatus').fadeIn();
// then read the source url from the image that
// was clicked and remove the '_s' from the url
// which points to the original, larger image.
var src = this.src.replace(/_s/, '');

// now create a new image, and set the source
// and once it's loaded:
$('<img>').attr('src', src).load(function () {
// empty the main picture contain and insert
// *this* image
$main.empty().append(this);

// then stop the loading status fade and fade out
$('#loadingStatus').stop(true, true).fadeOut();
});
});
</script>

当Ajax请求完成后,我们不得不重复这段代码使得图像可点击。但使用jQuery的delegate函数我们只需要编写一次,所有添加到$pictures列表的新图片将像我们希望的那样被加载。

jQuery事件委托

jQuery的delegate方法告诉一个父级元素监视一个特殊的事件,例如点击,如果该事件匹配你给它的选择器。

所以,不要这样写:

$('img').click(fn);
// in the code above this reads as
// $pictures.find('img').click(fn);

我们使用:

$pictures.delegate('img', 'click', fn);

告诉$pictures元素监视匹配的img选择器(当然这里可以是任意css选择器)的点击事件,如果条件发生,则运行Fn函数。

现在,我们可以移动到例子中的下一组照片,点击缩略图仍然有效,即使我们绑定单击处理事件的原始图片已经被移除。

一切都很简单!

原创译文 转载请注明出处
英文原文:Simple use of Event Delegation

发表评论

电子邮件地址不会被公开。 必填项已用*标注