javascript - YUI3 - Onclick event handling for links having same classes - Stack Overflow

admin管理员组

文章数量:1429617

Issue: YUI3 - Onclick event handling for links having same classes

We have few links in the page having same class. When I click on one of the links there are some different actions to be taken based on the which link was clicked, For e.g.

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

handler code:

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

when I click any of the links I get the list of all "data" attribute. We only need the data of link clicked.

Issue: YUI3 - Onclick event handling for links having same classes

We have few links in the page having same class. When I click on one of the links there are some different actions to be taken based on the which link was clicked, For e.g.

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

handler code:

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

when I click any of the links I get the list of all "data" attribute. We only need the data of link clicked.

• javascript
• yui
• yui3

Share Improve this question Follow edited Aug 1, 2012 at 15:27 Neo asked Aug 1, 2012 at 14:52 NeoNeo 5,2281010 gold badges4747 silver badges6666 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can also use e.target instead of this to access the element being clicked:

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

And for even better performance you can use event delegation:

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

all gives you a list of matched elements. You can use each to iterate through the list and do stuff for individual node. Refer to their Node Class API for more information.

Here is the code, and an example on jsfiddle.

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

There is also a FAQ entry for this question in the Event user guide on yuilibrary. (http://yuilibrary./yui/docs/event/#nodelist-this). It's generally preferable to use event delegation.

Here event delegation is better solution, agree with @juandopazo

If you do not want to use delegation, you can use Y.all('.sample').each(...) (solution from @user322896) or e.target (solution from @juandopazo), but I usually do it another way:

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

This is not a delegation syntax (listeners will be attached on links directelly) and there is no NodeList object, so this refers to particular link node. This way is also have preformance advantage paring to Y.all('.sample'), read this: Why would I use Y.on() or Y.delegate() instead of node.on() and node.delegate()?

本文标签： javascriptYUI3Onclick event handling for links having same classesStack Overflow