5

问题：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"));
});

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

4

3 回答 3

2

您还可以使用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');
于 2012-08-01T19:16:11.413 回答
1

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-this) 上的事件用户指南中也有此问题的常见问题解答条目。通常最好使用事件委托。

于 2012-08-01T15:32:36.103 回答
0

这里事件委托是更好的解决方案，同意@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()?

于 2012-08-24T12:31:38.213 回答