প্যারামিটার সহ জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার

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
});

'এলেম' অবশ্যই বেনামি ফাংশনের বাইরে সংজ্ঞায়িত করা উচিত। বেনামে ফাংশনটিতে কীভাবে উত্তীর্ণ উপাদানটি ব্যবহার করতে পারি? এই কাজ করতে একটি উপায় আছে কি?

এবং অ্যাডএভেন্টলিস্টনার সম্পর্কে কী? আমি কি কোনও অ্যাডভেন্টলিস্টনারের মাধ্যমে ইভেন্টটি পাস করতে সক্ষম হচ্ছি বলে মনে হয় না?

হালনাগাদ

আমি 'এটি' দিয়ে সমস্যার সমাধান করেছি বলে মনে হয়েছিল

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

যেখানে এটিতে এই উপাদানটি রয়েছে যা আমি ফাংশনে অ্যাক্সেস করতে পারি।

#EventListener

তবে আমি অ্যাডভেন্টলিস্টনার সম্পর্কে ভাবছি:

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]))

তারপরে, আপনি এটি একটি স্ব সম্পাদনকারী ফাংশন (আইআইএফই) দিয়ে করতে পারেন যা বন্ধের মধ্যে আপনি যে যুক্তিগুলি চান তা ক্যাপচার করে এটি বাস্তব ইভেন্ট হ্যান্ডলার ফাংশনটি সম্পাদন করে এবং ফেরত দেয়:

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

আইআইএফই কীভাবে কাজ করে সে সম্পর্কে আরও তথ্যের জন্য এই অন্যান্য উল্লেখগুলি দেখুন:

বেনামি ফাংশনের ভিতরে জাভাস্ক্রিপ্ট মোড়ানো কোড

জাভাস্ক্রিপ্টে তাত্ক্ষণিকভাবে অনুরোধ করা ফাংশন এক্সপ্রেশন (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

এটি একটি পুরানো প্রশ্ন তবে একটি সাধারণ প্রশ্ন। সুতরাং এখানে এটি একটি যোগ করা যাক।

সঙ্গে তীর ফাংশন সিনট্যাক্স আপনি এটি আরো সংক্ষিপ্ত পথ যেহেতু এটি আভিধানিক যুক্ত করে করা হয় এবং শৃঙ্খলিত করা যাবে অর্জন করতে পারেন।

একটি তীর ফাংশন এক্সপ্রেশন হ'ল নিয়মিত ফাংশন এক্সপ্রেশনটির সিনট্যাক্টিক্যালি কমপ্যাক্ট বিকল্প, যদিও এটির নিজস্ব যুক্তি ব্যতীত, আর্গুমেন্ট, সুপার, বা নিউ স্টার্ট কীওয়ার্ডগুলি নেই।

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.