问题：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>
处理程序代码：
Y.all('.sample').on('click', function(e){
e.preventDefault();
alert(this.getAttribute("data"));
});
当我点击任何链接时，我会得到所有“数据”属性的列表。我们只需要点击链接的数据。
【问题讨论】：
标签： javascript yui yui3
您也可以使用e.target 代替this 来访问被点击的元素：
Y.all('.sample').on('click', function(e){
e.preventDefault();
alert(e.target.getAttribute("data"));
});
为了获得更好的性能，您可以使用event delegation：
Y.one('body').delegate('click', function(e){
e.preventDefault();
alert(this.getAttribute("data"));
}, '.sample');
【讨论】：
all 为您提供匹配元素的列表。您可以使用each 遍历列表并为单个节点做一些事情。请参阅他们的Node Class API 了解更多信息。
这是代码，an example on 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-this) 上的事件用户指南中也有此问题的常见问题解答条目。通常最好使用事件委托。
【讨论】：
这里事件委托是更好的解决方案，同意@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')相比，这种方式也具有性能优势，请阅读：Why would I use Y.on() or Y.delegate() instead of node.on() and node.delegate()?
【讨论】：