Javascript YUI3-具有相同类的链接的Onclick事件处理

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

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

<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>

---

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

all

为您提供匹配元素的列表。您可以使用

each

遍历列表并为单个节点执行操作。有关更多信息，请参阅他们的

这是代码，还有

Y.all（'.sample'）。每个（函数（节点）{
节点上（'click'，函数（e）{
e、 预防默认值（）；
警报（node.getAttribute（“数据”）；
});
});​

---

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

您也可以使用

e.target

而不是

this

来访问被单击的元素：

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

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

---

在这里，活动授权是更好的解决方案，同意@juandopazo

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

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

这不是委派语法（侦听器将直接附加到链接上），并且没有NodeList对象，因此

此

引用特定的链接节点。

---

与

Y.all（'.sample'）

相比，这种方式也具有性能优势，请阅读：

@user322896:您的YUI技能如何？我正在努力回答我的问题。你想提出建议吗？@BrendanVogt你在努力解决哪个问题？我会尽力帮忙的。谢谢。关于YUI论坛：等等：

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

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