लूप-गुजरने वाले पैरामीटर के लिए जावास्क्रिप्ट एकाधिक गतिशील addEventListener

Question

काम नहीं कर रहा है, मैं ईवेंट श्रोताओं का उपयोग करना चाहता हूं ताकि ईवेंट पर एक div के अंदर div पर बुलबुले को रोक दिया जा सके। यह काम करता है मानकों मैं कैसे इरादा गुजर:

<div onclick="doMouseClick(0, 'Dog', 'Cat');" id="button_id_0"></div> 
<div onclick="doMouseClick(1, 'Dog', 'Cat');" id="button_id_1"></div> 
<div onclick="doMouseClick(2, 'Dog', 'Cat');" id="button_id_2"></div> 

<script> 
function doMouseClick(peram1, peram2, peram3){ 
    alert("doMouseClick() called AND peram1 = "+peram1+" AND peram2 = "+peram2+" AND peram3 = "+peram3); 
} 
</script> 

हालांकि, मैं इस के साथ एक पाश में कई घटना श्रोताओं बनाने की कोशिश की:

<div id="button_id_0"></div> 
<div id="button_id_1"></div> 
<div id="button_id_2"></div> 

<script> 
function doMouseClick(peram1, peram2, peram3){ 
    alert("doMouseClick() called AND peram1 = "+peram1+" AND peram2 = "+peram2+" AND peram3 = "+peram3); 
} 

var names = ['button_id_0', 'button_id_1', 'button_id_2']; 

    for (var i=0; i<names.length; i++){ 

     document.getElementById(names[i]).addEventListener("click", function(){ 
     doMouseClick(i, "Dog", "Cat"); 

    },false); 

} 

</script> 

यह सही ढंग से प्रत्येक div के लिए क्लिक समारोह प्रदान करती है, लेकिन प्रत्येक के लिए पहला पैरामीटर, peram1, 3 है। मैं peram1 के लिए i के विभिन्न मूल्यों को पारित करने वाले 3 अलग-अलग ईवेंट हैंडलर की अपेक्षा कर रहा था।

ऐसा क्यों हो रहा है? क्या ईवेंट हैंडलर सभी अलग नहीं हैं?

Answer 1

समस्या बंद है, क्योंकि जे एस और समय के आप i का उपयोग यह पहले से ही से नवीनतम मूल्य है, क्योंकि घटना समारोह एक और गुंजाइश बनाता i आप क्या सोचते नहीं है ब्लॉक गुंजाइश (केवल समारोह गुंजाइश) नहीं है for पाश। आपको i का मान रखने की आवश्यकता है।

for (var i=0; i<names.length; i++) { 
    (function(i) { 
    // use i here 
    }(i)); 
} 

forEach का उपयोग करना::

एक Iife का उपयोग

names.forEach(function(v,i) { 
    // i can be used anywhere in this scope 
}); 

Answer 2

सब कुछ जावास्क्रिप्ट में वैश्विक है। यह वेरिएबल i को कॉल कर रहा है जो आपके लूप के बाद 3 पर सेट है ... यदि आप लूप के बाद i 1000 पर सेट करते हैं, तो आप प्रत्येक विधि कॉलके लिए 1000 का उत्पादन करेंगे।

यदि आप राज्य को बनाए रखना चाहते हैं, तो आपको वस्तुओं का उपयोग करना चाहिए। ऑब्जेक्ट में एक कॉलबैक विधि है जिसे आप क्लिक विधि को असाइन करते हैं।

आपने इवेंट बबलिंग रोकने के लिए ऐसा करने का उल्लेख किया ... ईवेंट बबलिंग को रोकने के लिए, आपको वास्तव में इसकी आवश्यकता नहीं है, क्योंकि यह भाषा में बनाया गया है। यदि आप ईवेंट बबलिंग को रोकना चाहते हैं, तो आपको कॉलबैक में event ऑब्जेक्ट की stopPropagation() विधि का उपयोग करना चाहिए।

function doStuff(event) { 
    //Do things 
    //stop bubbling 
    event.stopPropagation(); 
} 

Answer 3

के रूप में बताया पहले से ही समस्या बंद और चर गुंजाइश के साथ क्या करना है। सही मूल्य प्राप्त करने का यह सुनिश्चित करने का एक तरीका यह है कि वांछित फ़ंक्शन देता है, वांछित फ़ंक्शन देता है, जो सही दायरे में चर को पकड़ता है। jsfiddle

var names = ['button_id_0', 'button_id_1', 'button_id_2']; 

function getClickFunction(a, b, c) { 
    return function() { 
    doMouseClick(a, b, c) 
    } 
} 
for (var i = 0; i < names.length; i++) { 
    document.getElementById(names[i]).addEventListener("click", getClickFunction(i, "Dog", "Cat"), false); 
} 

और एक तरह से आप के बजाय एक वस्तु के साथ ऐसा कर सकता है वर्णन करने के लिए:

var names = ['button_id_0', 'button_id_1', 'button_id_2']; 

function Button(id, number) { 
    var self = this; 
    this.number = number; 
    this.element = document.getElementById(id); 
    this.click = function() { 
    alert('My number is ' + self.number); 
    } 
    this.element.addEventListener('click', this.click, false); 
} 
for (var i = 0; i < names.length; i++) { 
    new Button(names[i], i); 
} 

या कुछ अलग ढंग से:

function Button(id, number) { 
    var element = document.getElementById(id); 
    function click() { 
    alert('My number is ' + number); 
    } 
    element.addEventListener('click', click, false); 
} 
for (var i = 0; i < names.length; i++) { 
    new Button(names[i], i); 
} 

Answer 4

यह क्योंकि बंद की है।

चेक इस बाहर: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#Creating_closures_in_loops_A_common_mistake

नमूना कोड और अपने कोड मूलतः एक ही है, यह उन लोगों के लिए एक आम गलती है "बंद" पता नहीं है।

इसे आसान बनाने के लिए, जब आप हैंडलर फ़ंक्शन बनाते हैं, तो यह बाहरी वातावरण से केवल i वैरिएबल तक नहीं पहुंचता है, बल्कि यह i "याद करता है"।

तो जब हैंडलर कहा जाता है, यह 2.