मापदंडों के साथ जावास्क्रिप्ट इवेंट हैंडलर

Question 1

मैं एक इवेंटहैंडलर बनाना चाहता हूं जो इवेंट और कुछ मापदंडों को पार करता है। समस्या यह है कि फ़ंक्शन को तत्व नहीं मिलता है। यहाँ एक उदाहरण है:

doClick = function(func){
    var elem = .. // the element where it is all about
    elem.onclick = function(e){
        func(e, elem);
    }
}
doClick(function(e, element){
    // do stuff with element and the event
});

अनाम फ़ंक्शन के बाहर 'एलेम' को परिभाषित किया जाना चाहिए। अनाम फ़ंक्शन के भीतर उपयोग करने के लिए मैं कैसे पारित तत्व प्राप्त कर सकता हूं? क्या इसे करने का कोई तरीका है?

और addEventListener के बारे में क्या? मुझे लगता है कि मैं इस कार्यक्रम को एक addEventListener के माध्यम से करने में सक्षम नहीं हो सकता हूँ?

अपडेट करें

मैं 'इस' के साथ समस्या को ठीक करने के लिए लग रहा था

doClick = function(func){
    var that = this;
    this.element.onclick = function(e){
        func(e, that);
    }
}

जहाँ इसमें यह सम्‍मिलित है कि फ़ंक्शन में मैं पहुंच सकता हूं।

AddEventListener

लेकिन मैं addEventListener के बारे में सोच रहा हूँ:

function doClick(elem, func){
    element.addEventListener('click', func(event, elem), false);
}

Question 2

मुझे समझ में नहीं आ रहा है कि आपका कोड क्या करने की कोशिश कर रहा है, लेकिन आप फ़ंक्शन क्लोजर के फायदों का उपयोग करके किसी भी घटना हैंडलर में चर उपलब्ध करा सकते हैं:

function addClickHandler(elem, arg1, arg2) {
    elem.addEventListener('click', function(e) {
        // in the event handler function here, you can directly refer
        // to arg1 and arg2 from the parent function arguments
    }, false);
}

आपकी सटीक कोडिंग की स्थिति के आधार पर, आप हमेशा बहुत कुछ बंद कर सकते हैं जो आपके लिए चर तक पहुंच को संरक्षित करता है।

अपनी टिप्पणियों से, यदि आप इसे पूरा करने की कोशिश कर रहे हैं, तो यह है:

element.addEventListener('click', func(event, this.elements[i]))

फिर, आप इसे स्वयं क्रियान्वित करने वाले फ़ंक्शन (IIFE) के साथ कर सकते हैं, जो आपके द्वारा बंद किए जाने वाले तर्कों को कैप्चर करता है क्योंकि यह निष्पादित होता है और वास्तविक ईवेंट हैंडलर फ़ंक्शन देता है:

element.addEventListener('click', (function(passedInElement) {
    return function(e) {func(e, passedInElement); };
}) (this.elements[i]), false);

IIFE कैसे काम करता है, इसके बारे में अधिक जानकारी के लिए, इन अन्य संदर्भों को देखें:

अनाम फ़ंक्शन के अंदर जावास्क्रिप्ट रैपिंग कोड

जावास्क्रिप्ट में तुरंत-आमंत्रित फ़ंक्शन अभिव्यक्ति (IIFE) - पासिंग jQuery

जावास्क्रिप्ट स्वयं उपयोग करने वाले अनाम कार्यों के लिए अच्छे उपयोग के मामले क्या हैं?

यह अंतिम संस्करण शायद यह देखना आसान है कि यह इस तरह क्या कर रहा है:

// return our event handler while capturing an argument in the closure
function handleEvent(passedInElement) {
    return function(e) {
        func(e, passedInElement); 
    };
}

element.addEventListener('click', handleEvent(this.elements[i]));

.bind()कॉलबैक में तर्कों को जोड़ने के लिए उपयोग करना भी संभव है । आपके द्वारा पास किए जाने वाले किसी भी तर्क .bind()को उन तर्कों के लिए प्रस्तुत किया जाएगा जो कॉलबैक के पास होंगे। तो, आप ऐसा कर सकते हैं:

elem.addEventListener('click', function(a1, a2, e) {
    // inside the event handler, you have access to both your arguments
    // and the event object that the event handler passes
}.bind(elem, arg1, arg2));

Question 3

यह एक पुराना सवाल है, लेकिन एक आम है। तो मुझे यह एक यहाँ जोड़ने के लिए।

साथ में तीर समारोह वाक्य रचना आप इसे और अधिक संक्षिप्त तरीका है, क्योंकि यह lexically आबद्ध है और श्रृंखलित किया जा सकता है हासिल कर सकते हैं।

एक तीर समारोह अभिव्यक्ति एक नियमित रूप से कार्य अभिव्यक्ति के लिए एक वाक्यात्मक रूप से कॉम्पैक्ट विकल्प है, हालांकि इस, तर्क, सुपर, या new.target कीवर्ड के अपने बाइंडिंग के बिना।

const event_handler = (event, arg) => console.log(event, arg);
el.addEventListener('click', (event) => event_handler(event, 'An argument'));

यदि आपको इवेंट श्रोता को साफ करने की आवश्यकता है:

// Let's use use good old function sytax
function event_handler(event, arg) {
  console.log(event, arg);
}

// Assign the listener callback to a variable
var doClick = (event) => event_handler(event, 'An argument'); 

el.addEventListener('click', doClick);

// Do some work...

// Then later in the code, clean up
el.removeEventListener('click', doClick);

यहाँ पागल एक लाइनर है:

// You can replace console.log with some other callback function
el.addEventListener('click', (event) => ((arg) => console.log(event, arg))('An argument'));

अधिक विनम्र संस्करण : किसी भी समझदार काम के लिए अधिक उपयुक्त।

el.addEventListener('click', (event) => ((arg) => {
  console.log(event, arg);
})('An argument'));

Question 4

कुछ आप कोशिश कर सकते हैं बाँध विधि का उपयोग कर रहा है, मुझे लगता है कि यह वही प्राप्त करता है जो आप के लिए पूछ रहे थे। अगर और कुछ नहीं, यह अभी भी बहुत उपयोगी है।

function doClick(elem, func) {
  var diffElem = document.getElementById('some_element'); //could be the same or different element than the element in the doClick argument
  diffElem.addEventListener('click', func.bind(diffElem, elem))
}

function clickEvent(elem, evt) {
  console.log(this);
  console.log(elem); 
  // 'this' and elem can be the same thing if the first parameter 
  // of the bind method is the element the event is being attached to from the argument passed to doClick
  console.log(evt);
}

var elem = document.getElementById('elem_to_do_stuff_with');
doClick(elem, clickEvent);

Question 5

मूल प्रश्न के अद्यतन को देखते हुए, ऐसा लगता है कि घटना संचालकों को पारित करते समय संदर्भ ("यह") के साथ परेशानी है। मूल बातें यहां बताई गई हैं जैसे कि http://www.w3schools.com/js/js_function_invocation.asp

आपके उदाहरण का एक सरल कार्यशील संस्करण पढ़ सकता है

var doClick = function(event, additionalParameter){
    // do stuff with event and this being the triggering event and caller
}

element.addEventListener('click', function(event)
{
  var additionalParameter = ...;
  doClick.call(this, event, additionalParameter );
}, false);

यह भी देखें ) जावास्क्रिप्ट कॉल () और लागू () बाँध बनाम (?

Question 6

संक्षिप्त जवाब:

x.addEventListener("click", function(e){myfunction(e, param1, param2)});

... 

function myfunction(e, param1, param1) {
    ... 
}

Question 7

thisके अंदर doThingsखिड़की वस्तु है। इसके बजाय यह प्रयास करें:

var doThings = function (element) {
    var eventHandler = function(ev, func){
        if (element[ev] == undefined) {
            return;
        }

        element[ev] = function(e){
            func(e, element);
        }
    };

    return {
        eventHandler: eventHandler
    };
};

Question 8

let obj = MyObject();

elem.someEvent( function(){ obj.func(param) } );

//calls the MyObject.func, passing the param.