YUI3 - onclick事件的處理具有相同的類鏈接

問題：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>

處理代碼：

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

當我點擊任何我得到的所有「數據」屬性的列表的鏈接。我們只需要點擊鏈接的數據。

來源

2012-08-01 Neo

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

也有事件的用戶指南在這個問題上的FAQ上yuilibrary.com（http://yuilibrary.com/yui/docs/event/#nodelist-this）。通常最好使用事件委派。

來源

2012-08-01 15:32:36 322896

那工作！感謝您的回答和解釋.. :) – Neo 2012-08-01 15:36:57

很高興幫助！ :) – 322896 2012-08-01 15:40:19

@ user322896：你的YUI技能有多好？我努力讓我的問題得到解答。你在乎建議嗎？ – 2012-08-01 17:08:12

您還可以使用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');

來源

2012-08-01 19:16:11 juandopazo

這裏事件代表團是更好的解決方案，同意@juandopazo

如果你不想使用委託，你可以使用Y.all（'。。樣本「）各（...）（來自@ 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-24 12:31:38 Petr

YUI3 - onclick事件的處理具有相同的類鏈接

回答

相關問題