同じクラスを持つリンクのOnClickイベント処理

Question

Issue：YUI3 - 同じクラスを持つリンクのOnClickイベント処理

同じクラスのページにはリンクがほとんどありません。リンクの1つをクリックすると、クリックされたリンクに基づいていくつかの異なるアクションが実行されます。

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

私はすべての「データ」属性のリストを取得する任意のリンクをクリックしたとき。私たちは、クリックされたリンクのデータだけが必要です。

Answer 1

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）上のイベントのユーザーガイドのこの質問のためのFAQエントリもあります。イベントの委任を使用することが一般に好ましい

Answer 2

また、クリックされた要素にアクセスするために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'); 

Answer 3

ここではイベントの代表団は、よりよい解決策です、 @juandopazoに同意します

委任を使いたくない場合は、Y.all（ '。 。サンプル '）各（...）（@ user322896から溶液）またはe.target（@juandopazoから溶液）が、私は通常それを行う別の方法：

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

これは、委任構文ではありません（リスナーLink Directellyにアタッチされます）、NodeListオブジェクトがないため、thisは特定のリンクノードを参照します。 この方法では、Y.all('.sample')と比較した場合の性能が優位です。これは次のとおりです。Why would I use Y.on() or Y.delegate() instead of node.on() and node.delegate()?