আমি কীভাবে jQuery এর ইভেন্ট হ্যান্ডলারের কাছে যুক্তিগুলি পাস করতে পারি?

Question

JQuery কোড সহ:

$("#myid").click(myfunction);

function myfunction(arg1, arg2) {/* something */}

myfunctionJQuery ব্যবহার করার সময় আমি কীভাবে যুক্তিগুলি পাস করব ?

Comments

পরামিতি হিসাবে পরামিতি সহ একটি ফাংশন পাস করার

— মিশা পেরেকোভস্কি

Answer 1

সবচেয়ে সহজ উপায় হ'ল এটি এমনভাবে করা (ধরে নিই যে আপনি কোনও অনুষ্ঠানের তথ্য প্রেরণ করতে চান না) ...

$("#myid").click(function() {
    myfunction(arg1, arg2);
});

jsFizz ।

এটি একটি বেনামে ফাংশন তৈরি করে, যা clickইভেন্টটি ট্রিগার করা হলে ডাকা হয়। এটি আপনার myfunction()প্রদত্ত যুক্তিগুলির সাথে পালা কল করবে ।

যদি আপনি ThisBinding( thisফাংশনটি চালিত হওয়ার সময় এর মানটি, ইভেন্টটি সূচিত করে এমন উপাদানটিতে সেট করে) রাখতে চান তবে তার সাথে ফাংশনটি কল করুন call()।

$("#myid").click(function() {
    myfunction.call(this, arg1, arg2);
});

jsFizz ।

আপনার উদাহরণটি যেভাবে বলছে আপনি সরাসরি রেফারেন্সটি পাস করতে পারবেন না বা এর একক যুক্তি jQuery eventঅবজেক্ট হবে ।

আপনি যদি রেফারেন্সটি পাস করতে চান তবে আপনাকে অবশ্যই jQuery এর proxy()ফাংশনটি (যা ক্রস ব্রাউজারের মোড়ক হিসাবে ব্যবহার করতে হবে Function.prototype.bind()) উপার্জন করতে হবে । এই আপনি আর্গুমেন্ট, যা আবদ্ধ হয় পাস করতে দেয় সামনেevent যুক্তি।

$("#myid").click($.proxy(myfunction, null, arg1, arg2));   

jsFizz ।

এই উদাহরণে, myfunction()সঙ্গে কার্যকর করা হবে তার ThisBindingঅক্ষত ( nullনয় একটি বস্তু, তাই স্বাভাবিক thisউপাদান যা আলোড়ন সৃষ্টি ঘটনা ব্যবহৃত হয় মান), আর্গুমেন্টগুলি (অনুক্রমে) সহ arg1, arg2এবং পরিশেষে jQuery এর eventঅবজেক্ট, যা আপনি উপেক্ষা করতে পারেন যদি এটির প্রয়োজন না হয় (এমনকি ফাংশনের যুক্তিতে এটির নামও রাখবেন না)।

আপনি ডেটা পাস করার জন্য jQuery eventঅবজেক্ট ব্যবহার করতে পারেন data, তবে myfunction()এটির মাধ্যমে এটি অ্যাক্সেস করার জন্য সংশোধন করতে হবে event.data.arg1(যা আপনার প্রশ্নের উল্লেখের মতো ফাংশন আর্গুমেন্ট নয় ) বা কমপক্ষে পূর্ববর্তী উদাহরণ বা উত্পন্ন একটির মতো ম্যানুয়াল প্রক্সি ফাংশন প্রবর্তন করা প্রয়োজন পরবর্তী উদাহরণ ব্যবহার করে।

Comments

মনে রাখবেন, আপনি জেফারি প্রসঙ্গ হারাবেন my (এটি) মাইফ্যাঙ্কশনে ()। বজায় রাখতে, myfunction(this, arg1, arg2)বেনামি হ্যান্ডলার থেকে কল করুন । তারপরে আপনার ফাংশনটি করতে পারেmyfunction(el, arg1, arg2) { alert($(el).val()); }

— ল্যাম্বিনেটর

@ জাস্টিভ: আপনি যদি এটি রাখতে চান তবে ব্যবহার করুন myfunction.call(this, arg1, arg2)।

— অ্যালেক্স

প্রশ্নটি যেমন জিজ্ঞাসা করে, তেমনি ফাংশনে আর্গুমেন্টগুলি প্রেরণ করা হচ্ছে না। এটি এমন একটি ফাংশন কল করে যা অন্য ফাংশনকে কল করে। বেনামে ফাংশনগুলির অভ্যন্তরে বাসা বাঁধাই ভাল ধারণা নয় কারণ আপনি বেনামে ফাংশনটি সহজেই সাজাতে পারেন না।

— জর্জ ফিলিপোকোস

@ geo1701 আপনি যদি কাস্টম নেমস্পেস ব্যবহার করেন এবং কেবল একবার এটির সাথে আবদ্ধ হন। বেশিরভাগ উদ্দেশ্যে, এটি ঠিক আছে। তবে আপনি যে সুবিধাটি উল্লেখ করেছেন তা হারাবেন না।

— অ্যালেক্স

@ জিও1701 এর সাথে সম্মত, আমাকে ইভেন্ট হ্যান্ডলারটি সরিয়ে ফেলতে হয়েছিল এবং তার সমাধানটি কেবল কাজ করেছে।

— পাভেল কে

Answer 2

$("#myid").on('click', {arg1: 'hello', arg2: 'bye'}, myfunction);

function myfunction(e) {

    var arg1 = e.data.arg1;
    var arg2 = e.data.arg2;

    alert(arg1);
    alert(arg2);

}

//call method directly:
myfunction({
    arg1: 'hello agian', 
    arg2: 'bye again'
});

এছাড়াও আপনাকে চালু এবং বন্ধ পদ্ধতিগুলি ব্যবহার করে নির্দিষ্ট ইভেন্ট হ্যান্ডলারগুলিকে বাঁধতে এবং আবদ্ধ করতে দেয়।

উদাহরণ:

$("#myid").off('click', myfunction);

এটি # মাইআইডি থেকে মাই ফাংশন হ্যান্ডলারটিকে আবদ্ধ করবে

Comments

প্রশ্নটি যেমন জিজ্ঞাসা করে, তেমনি ফাংশনে আর্গুমেন্টগুলি প্রেরণ করা হচ্ছে না।

— অ্যালেক্স

এভাবেই আপনি আর্গুমেন্টগুলি পাস করেন (আপনি এগুলিকে কোনও বস্তুর মধ্যে আবদ্ধ করেন)।

— জর্জ ফিলিপাকোস

এটি কীভাবে আপনি ডেটা পাস করেন তবে এটি তাদের ফাংশন আর্গুমেন্ট বলার জন্য প্রসারিত।

— অ্যালেক্স

এটি গ্রহণযোগ্য উত্তরের আরও ভাল সমাধান কারণ এটি অন / অফ পদ্ধতিগুলি ব্যবহার করে শোনাকারীদের বাঁধাই ও বাঁধাইয়ের প্রস্তাবিত প্যাটার্নটি ব্যবহার করে।

— জর্জ ফিলিপোকোস

আপনি যদি মনে করেন যে আনবাইন্ডিং বেশ বিরল তবে আপনার অবশ্যই খুব সীমিত অভিজ্ঞতা থাকতে হবে। দয়া করে অন্যের কাছ থেকে পু-অব অবদান রাখবেন না - এটি একটি যৌথ জ্ঞানের ভিত্তি যা প্রতিযোগিতা নয়। এর কোনো সঠিক অথবা ভুল উত্তর নেই.

— জর্জ ফিলিপোকোস

Answer 3

আপনার অবশ্যই অ্যালেক্সের উত্তরটি ব্যবহার করা উচিত, প্রোটোটাইপ লাইব্রেরির "বাইন্ড" পদ্ধতিটি ইকামাস্ক্রিপ্ট 5-তে প্রমিত করা হয়েছে, এবং শীঘ্রই স্থানীয়ভাবে ব্রাউজারগুলিতে প্রয়োগ করা হবে। এটি এর মতো কাজ করে:

jQuery("#myid").click(myfunction.bind(this, arg1, arg2));

Comments

আপনি thisযদি এই পদ্ধতিটি ব্যবহার করেন তবে একটি অন্য প্রসঙ্গে সেট করা হবে, উদাহরণস্বরূপ, bind()এটি thisসেই প্রসঙ্গে (বিশ্বব্যাপী) এ লিখিতকরণের ফলে সেই ক্লিক হ্যান্ডলারটির উপাদানটির কোনও রেফারেন্সের বিরোধিতা হিসাবে windowঅবজেক্ট থাকতে পারে ? this#myid

— অ্যালেক্স

@ আলেক্স আপনি ঠিক বলেছেন। jQuery এর ইভেন্ট হ্যান্ডলারগুলিতে # মাইড উপাদানটিকে এটি 'এটি' দিয়ে আবদ্ধ করবে এবং বাইন্ড পদ্ধতিটি ব্যবহার করে সেটি ওভাররাইড হবে। আমি বেশ কয়েক বছর আগে এই পোস্টটি লিখেছিলাম বলে মনে হচ্ছে এতক্ষণে আমি কী ভাবছিলাম তা বলা শক্ত। আমি অনুমান করি যে আমি কেবল ধরে নিয়েছি যে আমার উত্তরগুলি পড়ছেন তারা এই বিবরণগুলি নিজেরাই বের করার জন্য যথেষ্ট স্মার্ট।

— ব্রেটন

এটি একটি খুব বিপজ্জনক ধারণা।

— ট্র্যাভিস

@ ট্রাভিস এই লেখার মতো, (ব্রেটনের জবাবের প্রায় 11 বছর পরে), ক্যানিউজ ডটকম রিপোর্ট করেছে যে ইকামাস্ক্রিপ্ট 5 ব্রাউজারগুলির 98.87% দ্বারা সমর্থিত । ( caniuse.com/#search=ECMAScript%205 দেখুন )

— স্টিফান

@ স্টেফান আমার জিভ-ইন-গাল মন্তব্যটি অনুমান করার জন্য @ ব্রেটনের লক্ষ্য ছিল people reading my answers are smart enough to figure these details out themselves, ইকমাস্ক্রিপ্ট সম্পর্কে নয়।

— ট্র্যাভিস

Answer 4

পুরানো থ্রেড, তবে অনুসন্ধানের উদ্দেশ্যে; চেষ্টা করুন:

$(selector).on('mouseover',...);

... এবং "ডেটা" প্যারামিটারটি পরীক্ষা করে দেখুন: http://api.jquery.com/on/

যেমন:

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {name: "Karl"}, greet );
$( "button" ).on( "click", {name: "Addy"}, greet );

Answer 5

ইতিমধ্যে দুর্দান্ত উত্তর রয়েছে তবে যাইহোক, এখানে আমার দুটি সেন্ট রয়েছে। আপনি এটি ব্যবহার করতে পারেন:

$("#myid").click({arg1: "foo", arg2: "bar"}, myfunction)

এবং শ্রোতার মতো দেখতে হবে:

function myfunction(event){ alert(event.data.arg1); alert(event.data.arg2); }

Answer 6

সাধারণ:

$(element).on("click", ["Jesikka"],  myHandler);

function myHandler(event){
   alert(event.data);     //passed in "event.data"
}