YUI3 - ऑनक्लिक ईवेंट एक ही वर्गों

Question

जारी होने लिंक के लिए से निपटने: YUI3 - ऑनक्लिक ईवेंट एक ही वर्गों

हम एक ही कक्षा होने पेज में कुछ लिंक केवल सहायता की जरूरत लिंक के लिए से निपटने के। जब मैं किसी एक लिंक पर क्लिक करता हूं तो किस लिंक पर क्लिक किया गया था, इसके आधार पर कुछ अलग-अलग कार्रवाइयां की जाती हैं, उदाहरण के लिए

<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)। घटना प्रतिनिधिमंडल का उपयोग करना आम तौर पर बेहतर होता है।

Answer 2

तुम भी तत्व का उपयोग करने की this के बजाय e.target उपयोग कर सकते हैं क्लिक किया जा रहा:

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 ('का उपयोग कर सकते हैं। ।

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

यह एक प्रतिनिधिमंडल वाक्य रचना (श्रोताओं नहीं है: नमूना ') प्रत्येक (...) (@ user322896 से समाधान) या e.target (@juandopazo से समाधान), लेकिन मैं आम तौर पर यह एक और तरीके से करना सीधे लिंक पर संलग्न किया जाएगा) और कोई नोडलिस्ट ऑब्जेक्ट नहीं है, इसलिए this विशेष लिंक नोड को संदर्भित करता है। इस तरह से Y.all('.sample') की तुलना में प्रीफॉर्मेंस लाभ भी है, इसे पढ़ें: Why would I use Y.on() or Y.delegate() instead of node.on() and node.delegate()?