YUI3-具有相同类的链接的点击事件处理

YUI3 - Onclick event handling for links having same classes

本文关键字：链接 事件处理 同类 YUI3-      更新时间：2023-09-26

问题：YUI3-具有相同类的链接的点击事件处理

我们在页面中有几个链接有相同的类。当我点击其中一个链接时，会根据点击的链接采取一些不同的操作，例如

<a href="?page=1" data="test1" class="sample">One</a>
<a href="?page=2" data="test2" class="sample">two</a>
<a href="?page=3" data="test3" class="sample">three</a>

处理程序代码：

Y.all('.sample').on('click', function(e){
    e.preventDefault();
    alert(this.getAttribute("data"));
});

当我点击任何链接时，我会得到所有"数据"属性的列表。我们只需要点击链接的数据。

您也可以使用e.target而不是this来访问被单击的元素：

Y.all('.sample').on('click', function(e){
  e.preventDefault();
  alert(e.target.getAttribute("data"));
});

为了获得更好的性能，您可以使用事件委派：

Y.one('body').delegate('click', function(e){
  e.preventDefault();
  alert(this.getAttribute("data"));
}, '.sample');

all为您提供了一个匹配元素的列表。您可以使用each来遍历列表，并为单个节点做一些事情。有关更多信息，请参阅其节点类API。

以下是代码，以及关于jsfiddle的一个示例。

Y.all('.sample').each(function(node) {
    node.on('click', function(e) {
        e.preventDefault();
        alert(node.getAttribute("data"));
    });
});​

yuilibrary.com上的活动用户指南中也有关于此问题的常见问题解答条目(http://yuilibrary.com/yui/docs/event/#nodelist-这个）。通常最好使用事件委派。

这里的事件委派是更好的解决方案，同意@juandopazo

如果你不想使用委派，你可以使用Y.all（'.sample'）.each（…）（解决方案来自@user322896）或e.target（解决方案源自@juandopazo），但我通常用另一种方式：

Y.on('click', function(e){
    e.preventDefault();
    alert(this.getAttribute("data"));
}, '.sample');

这不是委托语法（侦听器将直接附加在链接上），也没有NodeList对象，因此this引用特定的链接节点。与Y.all('.sample')相比，这种方式也具有性能优势，请阅读：为什么我要使用Y.on（）或Y.delegate（）而不是node.on（）和node.delete（）？

相关文章：