यह अधिक तत्वों

Question

के शरीर या अलग-अलग समूहों पर घटनाओं क्लिक स्टोर करने के लिए कुशल मैं निम्नलिखित पढ़ा है बहुत सारी मेमोरी और धीमी गति से प्रदर्शन ...

... क्योंकि तत्वों को प्रभावित करने वाली घटनाएं आप ईवेंट वाले हैंडलर को एक तत्व पर रख सकते हैं और ईवेंट लक्ष्य संपत्ति का उपयोग करके पता लगा सकते हैं कि इसके किस बच्चे ने "

तो, क्या सिर्फ शरीर पर एक क्लिक घटना कर रहे हैं और उसके बाद सही समारोह सौंपने के लिए कमियां हैं tion?

मैं यहाँ एक उदाहरण है:

एचटीएमएल:

<div id="test" class="box">gfdgsfdg </div> 
<div id="test2" class="box">gfdsgfdsg</div> 
<div id="test3" class="box">fdsgfdsgg</div> 
<ul id="test4" class="box"> 
    <li id="test5" class="box">fsgfdsg</li> 
    <li id="test6" class="box">gfdsgfds</li> 
    <li id="test7" class="box">gfdsgfds</li> 
    <li id="test8" class="box">gfdsgfds</li> 
</ul> 

जे एस:

var body = document.body; 

if (body.addEventListener) { 
    body.addEventListener('click', function (e) { 
     delegate(e, "click"); 
    }, false); 
} else { 
    body.attachEvent('onclick', function (e) { 
     delegate(e, "click"); 
    }, false); 
} 


function delegate(e) { 
    var sourceNode = e.target || e.srcElement; 
    var id = sourceNode.id; 
    switch (id) { 
     case ("test"): 
      // do some func 
      break; 
     case ("test2"): 
      // do some func 
      break; 
     case ("test3"): 
      // do some func 
      break; 
     case ("test4"): 
      // do some func 
      break; 
     default: 
      // do nothing 
      break; 

    } 
} 

दिलचस्प बिंदु: यह एक घटना को बढ़ा देंगे Deadlink के लिए http://jsfiddle.net/jkg0h99d/3/

कोड बैकअप जब भी उपयोगकर्ता क्लिक करता है। लेकिन, क्या यह वास्तव में एक समस्या होने जा रहा है? सभी यह है एक स्विच के माध्यम जाँच (या जांच करता है कि हो सकता है)

इस की बात, मात्र ब्याज है, लेकिन यदि कोई उपयोगकर्ता बिंदु अनुकूलन के बारे में पूछा गया है। मैं सोच रहा हूं कि इसे बहुत जल्दी अनुकूलित किया जा सकता है लेकिन मैं विषय पर चर्चा जारी रखूंगा।

Answer 1

इस प्रकार की सबसे चीजों के साथ के रूप में, जवाब है, "यह निर्भर करता है" और आप एक मध्यम जमीन लेने की जरूरत है कि। आम तौर पर, सलाह है कि अत्यधिक बुलबुले से बचने के लिए डीओएम पेड़ में कम से कम अपेक्षाकृत उनके स्रोत के करीब घटनाएं रखें और body पर घटनाओं को तब तक रखने से बचें जब तक यह आवश्यक न हो।

एक उदाहरण के रूप में, आप अपने li रों के लिए घटना के प्रतिनिधिमंडल को संभालने के लिए अपने ul पर कोई हैंडलर बन सकता था:

document.getElementById('test4').addEventListener('click', function (e) { 
    // handle event for li 
}); 

यह आपको दोनों दुनिया के सर्वश्रेष्ठ देता है आप क्योंकि:

• Have एक घटना अपने डोम के लिए बाध्य हर li
• के लिए एक अलग प्रति के बजाय li क्लिक्स को संभालने के लिए अगर सेट घटनाओं पुनः अनुलग्न नहीं है li के गतिशील संशोधित किया गया है
• न्यूनतम उत्साह से भरा हुआ (सिर्फ एक स्तर) है
• एक बड़ा बदसूरत स्विच बयान

में तर्क मल्टीप्लेक्स नहीं है तो मुझे लगता है कि में रखने के लिए एक सार्थक सिद्धांत है मन।