অ্যাডভেন্টলিস্টনার শ্রোতার ফাংশনে যুক্তিগুলি কীভাবে পাস করবেন?


304

পরিস্থিতি কিছুটা এরকম-

var someVar = some_other_function();
someObj.addEventListener("click", function(){
    some_function(someVar);
}, false);

সমস্যাটি হ'ল someVarএর শ্রোতার ফাংশনের ভিতরে এর মানটি দৃশ্যমান নয় addEventListener, যেখানে এটি সম্ভবত একটি নতুন পরিবর্তনশীল হিসাবে বিবেচিত হচ্ছে।


8
বিষয়ে খুব পরিষ্কার নিবন্ধ: toddmotto.com/avoiding-anonymous-javascript-functions
Nobita

সবচেয়ে পরিষ্কার উপায় নয়, তবে কাজটি করে। মনে রাখবেন যে যদি কিছুবার কেবলমাত্র অঙ্ক বা পাঠ্য হতে পারে: eval ('someObj.addEventListener ("ক্লিক করুন", ফাংশন () {কিছু_ফাংশন (' + কিছুভার + ');});'););
Ignas2526

শুধু আজকের এই সমস্যা ছিল না - এখানে দেওয়া সমাধান সঠিক (অন্যান্য সমাধানগুলো, লুপ সমস্যার জন্য মত বিষয় আছে ইত্যাদি) - stackoverflow.com/a/54731362/984471
মনোহর রেড্ডি Poreddy

উত্তর:


206

আপনার লেখা কোডটির সাথে কোনও ভুল নেই। উভয় some_functionএবং someVarঅ্যাক্সেসযোগ্য হওয়া উচিত, যদি তারা প্রজ্ঞাপন যেখানে বেনামে উপলব্ধ ছিল

function() { some_function(someVar); } 

তৈরি হয়েছিল

সতর্কতা আপনাকে সন্ধান করছে এমন মান দেয় কিনা তা পরীক্ষা করে দেখুন, নিশ্চিত হয়ে নিন যে এটি বেনাম ফাংশনের সুযোগে অ্যাক্সেসযোগ্য হবে (যদি আপনার কাছে আরও কোড না থাকে যা someVarকল করার পাশের একই ভেরিয়েবলটিতে কাজ করে addEventListener)

var someVar; 
someVar = some_other_function();
alert(someVar);
someObj.addEventListener("click", function(){
    some_function(someVar);
}, false);

86
এটি লুপের জন্য কাজ করে না। আমি সর্বদা সর্বশেষতম মান পাই যা সেই পুনরাবৃত্তির সাথে সম্পর্কিত নয়। কোন সমাধান?
iMatoria

6
কেউ জানেন কেন এটি লুপে কাজ করে না? সেই আচরণের কারণ কী?
মরফিডন

3
@ মরফিডন কারণ বৈশ্বিক ভেরিয়েবলগুলির সাথে কাজটি জাভাস্ক্রিপ্টে ক্লোজার হিসাবে কাজ করে যার অর্থ তারা তাদের লেক্সিকাল স্কোপের বাইরে থাকা পরিবেশকে স্মরণ করে। আপনি যদি একই পরিবেশে কেবল আলাদা ফাংশন তৈরি করেন তবে তারা একই পরিবেশের উল্লেখ করবে।
বাগঘটিস94

16
@ মরফিডন: একটি লুপে শ্রোতা যুক্ত হওয়ার সময় কিছু ভারের মান এটির মূল্য নয়, তবে শ্রোতার মৃত্যুদণ্ড কার্যকর করার সময় এর মূল্য রয়েছে। শ্রোতা যখন মৃত্যুদন্ড কার্যকর করা হয়, লুপটি ইতিমধ্যে শেষ হয়ে গেছে, সুতরাং লুপ শেষ হওয়ার পরে কিছুভারের মান এটির মান হবে।
www.admiraalit.nl

4
@iMatoria আমি শুধু একটি তৈরি আবিষ্কৃত হয়েছে bound functionব্যবহার .bind()পদ্ধতি লুপ সঙ্গে সমস্যা সমাধান হবে developer.mozilla.org/en/docs/Web/JavaScript/Reference/...
লুক টি ব্রায়েন

353

কেন ইভেন্টের টার্গেট অ্যাট্রিবিউট থেকে যুক্তিগুলি পাওয়া যায় না?

উদাহরণ:

const someInput = document.querySelector('button');
someInput.addEventListener('click', myFunc, false);
someInput.myParam = 'This is my parameter';
function myFunc(evt)
{
  window.alert(evt.currentTarget.myParam);
}
<button class="input">Show parameter</button>

জাভাস্ক্রিপ্ট একটি প্রোটোটাইপ-ভিত্তিক ভাষা, মনে রাখবেন!


16
এটি 'রিমুভেন্টলিস্টনার' ফাংশনের পরে আমাদের সঠিক উত্তরটি দেয়।
ব্যবহারকারী5260143

14
এটা করা উচিত নয় evt.currentTarget.myParam? যদি 'সামিআইনপুট' এর ভিতরে অন্য কোনও উপাদান থাকে তবে evt.targetএটি অভ্যন্তরীণ উপাদানটিকে বোঝায়। ( jsfiddle.net/qp5zguay/1 )
হারবার্টাস

এই সংরক্ষণ this! টাইপস্ক্রিপ্টে এই পদ্ধতিটি ব্যবহার anyকরার জন্য উপাদানটি থাকা বা যদিও উপ-প্রকার তৈরি করা প্রয়োজন।
ওল্ড ব্যাডম্যান গ্রে

1
আমার ভেরিয়েবলগুলি অপরিবর্তিত হিসাবে ফিরে আসতে থাকবে ... কীভাবে এটি ঠিক করবেন সে সম্পর্কে কোনও চিন্তা?
noamam

1
যদি addEventListenerহয় document, evt.target.myParamআমার জন্য কাজ করে না। evt.currentTarget.myParamপরিবর্তে আমাকে ব্যবহার করতে হয়েছিল।
টারিকান_34

67

এই প্রশ্নটি পুরানো তবে আমি ভেবেছিলাম যে আমি উত্তরসূরীদের জন্য ES5 এর .bind () ব্যবহার করে একটি বিকল্প প্রস্তাব করব। :)

function some_func(otherFunc, ev) {
    // magic happens
}
someObj.addEventListener("click", some_func.bind(null, some_other_func), false);

আপনি কেবলমাত্র আপনার শ্রোতার ক্রিয়াকলাপটি প্রথম প্যারামের সাথে সেট করতে হবে যে যুক্তিটি আপনি যুক্ত করে চলেছেন (আপনার অন্যান্য ফাংশন) এবং দ্বিতীয় পরম এখন ইভেন্ট (প্রথমটির পরিবর্তে, যেমনটি হয়েছে) ।


1
এই সমস্যাটি সমাধানের জন্য ফাংশন.প্রোটোটাইপ.বাইন্ড () সত্যই সেরা উপায়। এছাড়াও এটি লুপের অভ্যন্তরে স্বজ্ঞাতভাবে কাজ করে - আপনি যে লেকিকাল স্কোপটি চান তা পান। কোনও বেনাম ফাংশন, আইআইএফই , বা বিশেষ বৈশিষ্ট্যগুলি বস্তুগুলিতে সজ্জিত নয়
ক্লিন্ট পাচল


1
ব্যবহার করে Function.prototype.bind()আপনি ইভেন্ট শ্রোতাকে অপসারণ করতে পারবেন না , তার পরিবর্তে কারিঙের ফাংশনটি ব্যবহার করা ভাল (@ টমসেক ১১১ উত্তর দেখুন)
pldg

দ্রষ্টব্য: some_other_funcএকটি পরিবর্তনশীল, আপনি যে মানটি চান তা পাস করতে পারেন some_func
হাইটাটোডস্ট্রাকচার

28

আপনি কেবল 'বাঁধাই' দিয়ে সমস্ত প্রয়োজনীয় যুক্তি যুক্ত করতে পারেন:

root.addEventListener('click', myPrettyHandler.bind(null, event, arg1, ... ));

এভাবে আপনি সবসময় পাবেন event, arg1প্রেরণ, এবং অন্যান্য উপাদান myPrettyHandler

http://passy.svbtle.com/partial-application-in-javascript-using-bind


ধন্যবাদ! ইতিমধ্যে চেষ্টা করেছিলেন .bind()কিন্তু প্রথম পরম হিসাবে নাল ছাড়াই। যা কাজ করেনি
লারফয়েড

কোনও প্রয়োজন নেই null, এটি .bind(event, arg1)কমপক্ষে VueJS এর ​​সাথে কাজ করে।
ডিভনডাহোনে

27

বেশ এবং পুরানো প্রশ্ন কিন্তু আমার আজ একই সমস্যা ছিল। সবচেয়ে সহজ সমাধান আমি খুঁজে পেয়েছি কারি করার ধারণাটি ব্যবহার করা

এর জন্য কোড:

someObj.addEventListener('click', some_function(someVar));

var some_function = function(someVar) {
    return function curried_func(e) {
        // do something here
    }
}

কার্ডিড ফাংশনটির নামকরণের মাধ্যমে এটি পরবর্তীতে মৃত্যুর পরে অবজেক্ট.রেমওভেন্টলিস্টনারকে ইভেন্টলিস্টনারটিকে নিবন্ধভুক্ত করতে অনুমতি দেয়।


4
এই উত্তরটি ক্রিডি ফাংশন উল্লেখ করে মুশকিল। আপনি কীভাবে ইভেন্ট শ্রোতাদের অপসারণ করবেন?
বব

3
ভাল পরিভাষা দেখতে দুর্দান্ত। আপনার ক্রিড ফাংশনটির নাম দিয়ে ইভেন্ট শ্রোতাদের সরাতে সক্ষম হওয়া উচিত। আমি একটি সম্পাদনা প্রস্তাব করব।
ম্যাথু ব্রেন্ট

এই উত্তরটি ফাংশনটি যতবার নিবন্ধভুক্ত করা হবে ততবার অ্যাডএভেন্টলিস্টনার বলা হয়েছে, যেহেতু কিছু_ফংশান (var) প্রতিবার নতুন তৈরি ফাংশনটি ফিরিয়ে দিচ্ছে।
ইয়াহিয়া

শ্রোতাদের কুজ মুছে ফেলতে কারি ফাংশনটির নাম রাখার ধারণাটি আমি পছন্দ করি না তবে আপনার 2 টি
ভিন্ন ভিন্ন স্পেসের

19

আপনি কোনও ফাংশনটিকে ভেরিয়েবল হিসাবে ঘোষণার মাধ্যমে আর্গুমেন্টের সাহায্যে ইভেন্টলিস্টার যুক্ত করতে এবং মুছতে পারেন।

myaudio.addEventListener('ended',funcName=function(){newSrc(myaudio)},false);

newSrcপ্যারামিটার funcNameহ'ল মায়োডিয়ো সহ পদ্ধতিটি হ'ল ফাংশন নেম ভেরিয়েবল

আপনি শ্রোতাদের সাথে মুছে ফেলতে পারেন myaudio.removeEventListener('ended',func,false);


12

আপনি জাভাস্ক্রিপ্ট বৈশিষ্ট্যটির মাধ্যমে ক্লোজার হিসাবে পরিচিত হয়ে কিছুটা মূল্য দিয়ে যেতে পারেন (রেফারেন্স দ্বারা নয়) :

var someVar='origin';
func = function(v){
    console.log(v);
}
document.addEventListener('click',function(someVar){
   return function(){func(someVar)}
}(someVar));
someVar='changed'

অথবা আপনি একটি সাধারণ মোড়ক ফাংশন যেমন লিখতে পারেন wrapEventCallback:

function wrapEventCallback(callback){
    var args = Array.prototype.slice.call(arguments, 1);
    return function(e){
        callback.apply(this, args)
    }
}
var someVar='origin';
func = function(v){
    console.log(v);
}
document.addEventListener('click',wrapEventCallback(func,someVar))
someVar='changed'

এখানে wrapEventCallback(func,var1,var2)যেমন:

func.bind(null, var1,var2)

1
এই উত্তরের জন্য অনেক ধন্যবাদ! ওপি এটি সন্ধান করছে না, তবে আমি মনে করি যারা গুগলে "অ্যাডভেন্টলিস্টনারকে অর্গগুলি কীভাবে পাস করবেন" টাইপ করেন এমন লোকেরা আপনার উত্তর খুঁজবে। এটির জন্য আরও কিছুটা ব্যাখ্যা দরকার :) আমি এটি সম্পাদনা করছি।
সিন্ডারাস

9

someVarমানটি some_function()শ্রোতাদের থেকে নয়, শুধুমাত্র প্রসঙ্গে প্রাপ্য। যদি আপনি এটি শ্রোতার মধ্যে রাখতে চান তবে আপনার অবশ্যই এমন কিছু করতে হবে:

someObj.addEventListener("click",
                         function(){
                             var newVar = someVar;
                             some_function(someVar);
                         },
                         false);

এবং newVarপরিবর্তে ব্যবহার করুন।

অন্য উপায় হ'ল শ্রোতাদের (নতুন স্থানীয় ভেরু হিসাবে) আরও ব্যবহার করার জন্য someVarথেকে মূল্য some_function()ফেরানো:

var someVar = some_function(someVar);

9

এখানে আরও একটি উপায় রয়েছে (এটি লুপগুলির জন্য ভিতরে কাজ করে):

var someVar = some_other_function();
someObj.addEventListener("click", 

function(theVar){
    return function(){some_function(theVar)};
}(someVar),

false);

2
এই হল সর্বোত্তম উপায়। কুরুচিপূর্ণ, তবে লুপগুলির মধ্যে কার্যকর যেহেতু একটি বেনামী ফাংশনে একটি যুক্তি প্রেরণ করে ভেরিটি ক্যাপচার করবে।
বব

9

ফাংশন.প্রোটোটাইপ.বাইন্ড () হ'ল একটি লক্ষ্য ফাংশনকে একটি নির্দিষ্ট সুযোগে আবদ্ধ thisকরার এবং লক্ষ্য ফাংশনের মধ্যে অবৈধভাবে সংজ্ঞা দেওয়ার উপায় ।

someObj.addEventListener("click", some_function.bind(this), false);

বা কিছু লাক্ষিক স্কোপ ক্যাপচার করতে উদাহরণস্বরূপ একটি লুপে:

someObj.addEventListener("click", some_function.bind(this, arg1, arg2), false);

অবশেষে, thisলক্ষ্য ফাংশনের মধ্যে যদি প্যারামিটারের প্রয়োজন না হয়:

someObj.addEventListener("click", some_function.bind(null, arg1, arg2), false);

7

ব্যবহার

   el.addEventListener('click',
    function(){
        // this will give you the id value 
        alert(this.id);    
    },
false);

এবং যদি আপনি এই বেনাম ফাংশনে কোনও কাস্টম মান পাস করতে চান তবে তা করার সহজতম উপায়

 // this will dynamically create property a property
 // you can create anything like el.<your  variable>
 el.myvalue = "hello world";
 el.addEventListener('click',
    function(){
        //this will show you the myvalue 
        alert(el.myvalue);
        // this will give you the id value 
        alert(this.id);    
    },
false);

আমার প্রকল্পে পুরোপুরি কাজ করে। আশা করি এটি সাহায্য করবে


হ্যাঁ, অবশ্যই সহায়তা করেছে, কারণ এটি একটি forলুপের মধ্যেও প্রত্যাশিত সুযোগ বজায় রেখেছে ।
j4v1

4
    $form.addEventListener('submit', save.bind(null, data, keyword, $name.value, myStemComment));
    function save(data, keyword, name, comment, event) {

এইভাবেই আমি ইভেন্টটি সঠিকভাবে পাস করলাম।


দুর্দান্ত, আমি প্রায় এইভাবেই শেষ করছিলাম - ভুলভাবে অতিরিক্ত ইভেন্টটিকে বাঁধাইয়ের সাথে আবদ্ধ করা হয়েছে যখন এটি নেই (কৌণিকের মতো), যা স্বয়ংক্রিয়ভাবে এই ক্ষেত্রে আসে।
মনোহর রেড্ডি পোরেড্ডি

এই আমার ভাল কাজ করে।
লিসা

3

কোনও ইভেন্টলিস্টারের কলব্যাক ফাংশনে আর্গুমেন্ট প্রেরণের জন্য একটি বিচ্ছিন্ন ফাংশন তৈরি করা এবং সেই বিচ্ছিন্ন ফাংশনে আর্গুমেন্টগুলি পাস করা দরকার।

আপনি ব্যবহার করতে পারেন এখানে একটি দুর্দান্ত ছোট সহায়ক ফাংশন। উপরের "হ্যালো ওয়ার্ল্ড" উদাহরণের ভিত্তিতে))

একটি জিনিস যা প্রয়োজন তা হ'ল ফাংশনটির একটি রেফারেন্স বজায় রাখা যাতে আমরা শ্রোতাকে পরিষ্কারভাবে মুছে ফেলতে পারি।

// Lambda closure chaos.
//
// Send an anonymous function to the listener, but execute it immediately.
// This will cause the arguments are captured, which is useful when running 
// within loops.
//
// The anonymous function returns a closure, that will be executed when 
// the event triggers. And since the arguments were captured, any vars 
// that were sent in will be unique to the function.

function addListenerWithArgs(elem, evt, func, vars){
    var f = function(ff, vv){
            return (function (){
                ff(vv);
            });
    }(func, vars);

    elem.addEventListener(evt, f);

    return f;
}

// Usage:

function doSomething(withThis){
    console.log("withThis", withThis);
}

// Capture the function so we can remove it later.
var storeFunc = addListenerWithArgs(someElem, "click", doSomething, "foo");

// To remove the listener, use the normal routine:
someElem.removeEventListener("click", storeFunc);

এই উত্তরটি '15 থেকে এসেছে তবে একটি ইউজরাফ হুক ব্যবহার করে এই সমস্যাটি হ্যান্ডেল করার জন্য আমার ঠিক এটি দরকার ছিল। যদি আপনি কোনও রেফ হুক ব্যবহার করেন এবং এর জন্য শ্রোতার প্রয়োজন হয় যা আপনি আনমাউন্টিং উপাদানটি পরিষ্কার করতে পারেন, এটি এটি। 4 র্থ আরগটি storeFuncআপনার রেফ পরিবর্তনশীল হওয়া উচিত। আপনার শ্রোতাদের অপসারণটি এর মতো ব্যবহারে কার্যকর করুন এবং আপনি যেতে ভাল:useEffect(() => { return () => { window.removeEventListener('scroll', storeFunc, false); } }, [storeFunc])
রব বি

3

একটি উপায় বাইরের ফাংশন দিয়ে এটি করছে :

elem.addEventListener('click', (function(numCopy) {
  return function() {
    alert(numCopy)
  };
})(num));

প্রথম বন্ধনীর মধ্যে বেনামে ফাংশন মোড়ানো এবং এখুনি কল করার এই পদ্ধতিকে আইআইএফই (তাত্ক্ষণিকভাবে অনুরোধ করা ফাংশন এক্সপ্রেশন) বলা হয়

আপনি http://codepen.io/froucher/pen/BoWwgz এ দুটি পরামিতি সহ একটি উদাহরণ চেক করতে পারেন ।

catimg.addEventListener('click', (function(c, i){
  return function() {
    c.meows++;
    i.textContent = c.name + '\'s meows are: ' + c.meows;
  }
})(cat, catmeows));

3

যদি আমি ভুলক্রমে ফাংশনটি কল করে ব্যবহার না করি তবে bindএকটি নতুন ফাংশন তৈরি করে যা bindপদ্ধতি দ্বারা ফিরে আসে । এটি পরে আপনার সমস্যার কারণ হতে পারে বা আপনি ইভেন্ট শ্রোতাদের অপসারণ করতে চান, কারণ এটি মূলত একটি বেনাম ফাংশনের মতো:

// Possible:
function myCallback() { /* code here */ }
someObject.addEventListener('event', myCallback);
someObject.removeEventListener('event', myCallback);

// Not Possible:
function myCallback() { /* code here */ }
someObject.addEventListener('event', function() { myCallback });
someObject.removeEventListener('event', /* can't remove anonymous function */);

তাই মনে রাখবেন।

আপনি যদি ES6 ব্যবহার করে থাকেন তবে আপনি প্রস্তাবিত হিসাবে একই কাজটি করতে পারেন তবে কিছুটা ক্লিনার:

someObject.addEventListener('event', () => myCallback(params));

3

চমৎকার এক লাইন বিকল্প

element.addEventListener('dragstart',(evt) => onDragStart(param1, param2, param3, evt));
function onDragStart(param1, param2, param3, evt) {

 //some action...

}

2

এগুলিও (IE8 + ক্রোম। এফএফের জন্য আমি জানিনা) চেষ্টা করুন:

function addEvent(obj, type, fn) {
    eval('obj.on'+type+'=fn');
}

function removeEvent(obj, type) {
    eval('obj.on'+type+'=null');
}

// Use :

function someFunction (someArg) {alert(someArg);}

var object=document.getElementById('somObject_id') ;
var someArg="Hi there !";
var func=function(){someFunction (someArg)};

// mouseover is inactive
addEvent (object, 'mouseover', func);
// mouseover is now active
addEvent (object, 'mouseover');
// mouseover is inactive

আশা করি কোনও টাইপস নেই :-)


একটি সম্পূর্ণ উত্তর দেওয়া কত কঠিন হবে? আমি এফএফ এ পরীক্ষা করা উচিত? ঠিক আছে, আমি বিরক্ত করব না ...
স্টিফ্যানচ

2

আমি এটির মধ্যে আটকে গিয়েছিলাম কারণ আমি উপাদানগুলি খুঁজে পেতে এবং এতে তালিকাগুলি যুক্ত করার জন্য একটি লুপে এটি ব্যবহার করছিলাম। আপনি যদি এটি কোনও লুপে ব্যবহার করেন তবে এটি পুরোপুরি কার্যকর হবে

for (var i = 0; i < states_array.length; i++) {
     var link = document.getElementById('apply_'+states_array[i].state_id);
     link.my_id = i;
     link.addEventListener('click', function(e) {   
        alert(e.target.my_id);        
        some_function(states_array[e.target.my_id].css_url);
     });
}

2

2019 সালে, প্রচুর এপিআই পরিবর্তন হয়, সর্বোত্তম উত্তর আর কার্যকর হয় না, ফিক্স বাগ ছাড়াই।

কিছু কার্যকরী কোড ভাগ করুন।

উপরের সমস্ত উত্তর দ্বারা অনুপ্রাণিত।

 button_element = document.getElementById('your-button')

 button_element.setAttribute('your-parameter-name',your-parameter-value);

 button_element.addEventListener('click', your_function);


 function your_function(event)
   {
      //when click print the parameter value 
      console.log(event.currentTarget.attributes.your-parameter-name.value;)
   }

1

সমস্ত ফাংশনের ভিতরে একটি বিশেষ পরিবর্তনশীল রয়েছে: আর্গুমেন্ট । বেনামী পরামিতি হিসেবে আপনার পরামিতি পাস এবং তাদের (আদেশ দ্বারা) মাধ্যমে অ্যাক্সেস করতে পারেন আর্গুমেন্ট ভেরিয়েবলের ।

উদাহরণ:

var someVar = some_other_function();
someObj.addEventListener("click", function(someVar){
    some_function(arguments[0]);
}, false);

হুম ... ডাউনটোটের কারণ কী? আপনি যেখানে সন্ধান করছেন তা যদি তা না হয় তবে দয়া করে আপনি কী বোঝাতে চেয়েছেন তা স্পষ্ট করে ব্যাখ্যা করুন (আমি জানি যে ইতিমধ্যে প্রশ্নের উত্তর দেওয়া হয়েছে)। কিন্তু আমার কোড আপনি যা চেয়েছিলেন তার উত্তর দিচ্ছে না? বিশেষ চলক "আর্গুমেন্ট" আপনাকে একটি ফাংশনের অভ্যন্তরে সমস্ত পরামিতিগুলিতে অ্যাক্সেস দেয়।
StanE

1
    var EV = {
        ev: '',
        fn: '',
        elem: '',
        add: function () {
            this.elem.addEventListener(this.ev, this.fn, false);
        }
    };

    function cons() {
        console.log('some what');
    }

    EV.ev = 'click';
    EV.fn = cons;
    EV.elem = document.getElementById('body');
    EV.add();

//If you want to add one more listener for load event then simply add this two lines of code:

    EV.ev = 'load';
    EV.add();

1

নিম্নলিখিত পদ্ধতিটি আমার পক্ষে ভালভাবে কাজ করেছে। এখান থেকে পরিবর্তিত ।

function callback(theVar) {
  return function() {
    theVar();
  }
}

function some_other_function() {
  document.body.innerHTML += "made it.";
}

var someVar = some_other_function;
document.getElementById('button').addEventListener('click', callback(someVar));
<!DOCTYPE html>
<html>
  <body>
    <button type="button" id="button">Click Me!</button>
  </body>
</html>


0

নিম্নলিখিত উত্তরটি সঠিক তবে নীচের কোডটি আইই 8 তে কাজ করছে না যদি ধরুন আপনি ইউসি কমপ্রেসার ব্যবহার করে জেএস ফাইল সংকুচিত করেছেন। (আসলে, এখনও মার্কিন যুক্তরাষ্ট্রের বেশিরভাগ লোকই আইই 8 ব্যবহার করে)

var someVar; 
someVar = some_other_function();
alert(someVar);
someObj.addEventListener("click",
                         function(){
                          some_function(someVar);
                         },
                         false);

সুতরাং, আমরা নিম্নরূপে উপরের সমস্যাটি ঠিক করতে পারি এবং এটি সমস্ত ব্রাউজারে দুর্দান্ত কাজ করে

var someVar, eventListnerFunc;
someVar = some_other_function();
eventListnerFunc = some_function(someVar);
someObj.addEventListener("click", eventListnerFunc, false);

আশা করি, উত্পাদনের পরিবেশে জেএস ফাইলটি সংকুচিত করছেন এমন কারও পক্ষে এটি কার্যকর হবে।

শুভকামনা !!


0

নিম্নলিখিত কোডটি আমার জন্য কাজ করেছে (ফায়ারফক্স):

for (var i=0; i<3; i++) {
   element = new ...   // create your element
   element.counter = i;
   element.addEventListener('click', function(e){
        console.log(this.counter);
        ...            // another code with this element
   }, false);
}

আউটপুট:

0
1
2

এই বিশ্বের কি?
নিকক নিউম্যান


0

সম্ভবত অনুকূল নয়, তবে সুপার জেএস বুদ্ধিমানদের জন্য যথেষ্ট সহজ। ফাংশনটি যা addEventListener কে তার নিজস্ব ফাংশনে কল করে। এতে যে কোনও ফাংশন মানগুলি এতে প্রবেশ করে তাদের নিজস্ব ক্ষেত্র বজায় রাখে এবং আপনি সেই ফাংশনটি যতটা চান পুনরাবৃত্তি করতে পারেন।

চিত্র এবং ফাইলের নামের পূর্বরূপ ক্যাপচার এবং রেন্ডার করার জন্য আমি ফাইল পড়ার সাথে কাজ করেছি উদাহরণ Example একাধিক ফাইল আপলোড প্রকারটি ব্যবহার করার সময় অ্যাসিনক্রোনাস সমস্যাগুলি এড়াতে আমার কিছুটা সময় লেগেছে। আমি দুর্ঘটনাক্রমে বিভিন্ন ফাইল আপলোড করেও সমস্ত রেন্ডারে একই নামটি দেখতে পাই would

মূলত, সমস্ত রিডফিল () ফাংশনটি রিডফিলস () ফাংশনের মধ্যে ছিল। এর ফলে অ্যাসিনক্রোনাস স্কোপিংয়ের সমস্যা দেখা দিয়েছে।

    function readFiles(input) {
      if (input.files) {
        for(i=0;i<input.files.length;i++) {

          var filename = input.files[i].name;

          if ( /\.(jpe?g|jpg|png|gif|svg|bmp)$/i.test(filename) ) {
            readFile(input.files[i],filename);
          }
       }
      }
    } //end readFiles



    function readFile(file,filename) {
            var reader = new FileReader();

            reader.addEventListener("load", function() { alert(filename);}, false);

            reader.readAsDataURL(file);

    } //end readFile

0

শুধু যোগ করতে চাই। যদি কোনও ইভেন্ট শ্রোতার কাছে চেকবক্সগুলিকে আপডেট করে এমন কোনও ফাংশন যুক্ত করে থাকে তবে আপনাকে চেকবক্সগুলি আপডেট করার event.targetপরিবর্তে ব্যবহার করতে হবে this


0

আমি খুব সরলবাদী পদ্ধতির আছে। এটি অন্যদের জন্য কাজ করতে পারে যেমন এটি আমাকে সহায়তা করেছিল। এটি হ'ল ... যখন আপনি একাধিক উপাদান / ভেরিয়েবলগুলি একই ফাংশন নির্ধারিত করছেন এবং আপনি রেফারেন্সটি পাস করতে চান তখন সহজ সমাধানটি হ'ল ...

function Name()
{

this.methodName = "Value"

}

এটাই. এটা আমার জন্য কাজ করেছে। খুবই সোজা.


-1

অন্যান্য বিকল্প, সম্ভবত বাইন্ড ব্যবহারের মতো মার্জিত নয়, তবে এটি লুপের ইভেন্টগুলির জন্য বৈধ

for (var key in catalog){
    document.getElementById(key).my_id = key
    document.getElementById(key).addEventListener('click', function(e) {
        editorContent.loadCatalogEntry(e.srcElement.my_id)
    }, false);
}

এটি গুগল ক্রোম এক্সটেনশনের জন্য পরীক্ষা করা হয়েছে এবং সম্ভবত e.srcElement অন্য ব্রাউজারগুলিতে ই.সোর্স দ্বারা প্রতিস্থাপন করতে হবে

আমি ইমাটোরিয়া পোস্ট করা মন্তব্যটি ব্যবহার করে এই সমাধানটি পেয়েছি তবে আমি এটিকে দরকারী হিসাবে চিহ্নিত করতে পারি না কারণ আমার যথেষ্ট খ্যাতি নেই: ডি


-1

এই সমাধানটি খুঁজছেন জন্য ভাল হতে পারে

var some_other_function = someVar => function() {
}

someObj.addEventListener('click', some_other_function(someVar));

বা বাঁধনযোগ্য মূল্যবানগুলিও ভাল

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.