पैरामीटर

Question

के साथ इवेंट श्रोताओं को जोड़ना और निकालना मैं वेनिला जावास्क्रिप्ट टूल लिख रहा हूं, जब सक्षम हो तो इवेंट श्रोताओं को इसमें से प्रत्येक तत्व में पास किया जाता है। दुर्भाग्य से यह काम नहीं करता है, क्योंकि जहाँ तक मुझे पता है, जब एक घटना श्रोता जोड़ने, मापदंडों केवल अनाम कार्यों में पारित किया जा सकता

var do_something = function (obj) { 
     // do something 
    }; 

for (var i = 0; i < arr.length; i++) { 
    arr[i].el.addEventListener('click', do_something(arr[i])); 
} 

:

मैं कुछ इस तरह करना चाहते हैं :

for (var i = 0; i < arr.length; i++) { 
    arr[i].el.addEventListener('click', function (arr[i]) { 
     // do something 
    }); 
} 

समस्या यह है कि मैं घटना श्रोता दूर करने के लिए जब उपकरण अक्षम किया गया है में सक्षम होना चाहिए है, लेकिन मुझे नहीं लगता कि यह Ano साथ घटना श्रोताओं को दूर करने के लिए संभव है है nymous कार्यों।

for (var i = 0; i < arr.length; i++) { 
    arr[i].el.removeEventListener('click', do_something); 
} 

मैं मैं आसानी से अपने समस्या को हल करने jQuery इस्तेमाल कर सकते हैं पता है, लेकिन मैं निर्भरता कम करने के लिए कोशिश कर रहा हूँ। jQuery को किसी भी तरह से गोल करना चाहिए, लेकिन कोड जंगल का थोड़ा सा है!

Answer 1

यह अमान्य है:

arr[i].el.addEventListener('click', do_something(arr[i])); 

श्रोता एक समारोह संदर्भ होना चाहिए। आप श्रोता असाइनमेंट के समय पैरामीटर निर्दिष्ट नहीं कर सकते हैं। एक हैंडलर फ़ंक्शन हमेशा event के साथ पहली तर्क के रूप में पारित किया जाएगा। अन्य तर्कों से पारित करने के लिए, तुम इतनी तरह एक गुमनाम समारोह में अपने श्रोता लपेट कर सकते हैं:

function myListener(event) { 
    do_something(...); 
} 

elem.addEventListener('click', myListener); 

अन्य चर उपयोग कर सकते है करने के लिए:

elem.addEventListener('click', function(event) { 
    do_something(...) 
} 

removeEventListener के माध्यम से दूर करने के लिए आप सिर्फ हैंडलर समारोह नाम सक्षम होने के लिए हैंडलर फ़ंक्शन में, आप बंद करने का उपयोग कर सकते हैं। उदाहरण के लिए:

function someFunc() { 
    var a = 1, 
     b = 2; 

    function myListener(event) { 
    do_something(a, b); 
    } 

    elem.addEventListener('click', myListener); 
} 

Answer 2

आप

for (var i = 0; i < arr.length; i++) { 
    arr[i].el.addEventListener('click', do_something); 
} 

उपयोग कर सकते हैं आप

function do_something(e) { 
    var obj = e.currentTarget 
    // do something 
} 

श्रोता

दूर करने के लिए के रूप में घटना से तत्व प्राप्त कर सकते हैं घटना पहले पैरामीटर के रूप do_something कार्य करने के लिए पारित हो जाता है के रूप में

for (var i = 0; i < arr.length; i++) { 
    arr[i].el.removeEventListener('click', do_something); 
} 

यदि आप पैरामीटर के रूप में एक और obj पास करना चाहते हैं इस

for (var i = 0; i < arr.length; i++) { 
    arr[i].el.addEventListener('click', do_something, obj); 
} 

Answer 3

यह काफी आसानी से किया जा सकता है, तुम्हारे पास है बस के रूप में नहीं अभी ऐसा।

यादृच्छिक अनामिक कार्यों को जोड़ने और निकालने का प्रयास करने के बजाय, आपको अपने अन्य फ़ंक्शन के निष्पादन को संभालने वाले फ़ंक्शन को जोड़ने या निकालने की आवश्यकता है।

var 
    // Here we are going to save references to our events to execute 
    cache = {}, 

    // Create a unique string to mark our elements with 
    expando = String(Math.random()).split('.')[ 1 ], 

    // Global unique ID; we use this to keep track of what events to fire on what elements 
    guid = 1, 

    // The function to add or remove. We use this to handler all of other 
    handler = function (event) { 

     // Grab the list of functions to fire 
     var handlers = (cache[ this[ expando ] ] && cache[ this[ expando ] ][ event.type ]) || false; 

     // Make sure the list of functions we have is valid 
     if (!handlers || !handlers.length) { 
      return; 
     } 

     // Iterate over our individual handlers and call them as we go. Make sure we remeber to pass in the event Object 
     handlers.forEach(function (handler) { 
      handler.call(this, event); 
     }); 

    }, 

    // If we want to add an event to an element, we use this function 
    add = function (element, type, fn) { 

     // We test if an element already has a guid assigned 
     if (!element[ expando ]) { 
      element[ expando ] = guid++; 
     } 

     // Grab the guid number 
     var id = element[ expando ]; 

     // Make sure the element exists in our global cache 
     cache[ id ] = cache[ id ] || {}; 

     // Grab the Array that we are going to store our handles in 
     var handlers = cache[id ][ type ] = cache[ id ][ type ] || []; 

     // Make sure the handle that was passed in is actually a function 
     if (typeof fn === 'function') { 
      handlers.push(fn); 
     } 

     // Bind our master handler function to the element 
     element.addEventListener(type, handler, false); 

    }; 

// Add a click event to the body element 
add(document.body, 'click', function (event) { 
    console.log(1); 
}); 

यह मैंने जो लिखा है उसका सिर्फ एक कट संस्करण है, लेकिन आप इसकी आशा प्राप्त कर सकते हैं।