একবার এক অনুষ্ঠানে শ্রোতা

Jeff Posnick

পপ কুইজ: addEventListener() এ পাস করা তৃতীয় প্যারামিটারের উদ্দেশ্য কী?

আপনি যদি ভেবে থাকেন যে addEventListener() শুধুমাত্র দুটি প্যারামিটার নিয়েছে, অথবা সম্ভবত সবসময় false একটি মান হার্ডকোড করেছে, একটি অস্পষ্ট বোঝার সাথে যে এটির সাথে কিছু করার আছে… বুদবুদ?

দ্রষ্টব্য: তৃতীয় প্যারামিটারটি ঐতিহাসিকভাবে একটি বুলিয়ান মান, যা false ডিফল্ট ছিল এবং যা ইভেন্ট শ্রোতা ক্যাপচারিং বা বাবলিং মোডে ছিল কিনা তা নিয়ন্ত্রণ করে ।

একটি আরো কনফিগারযোগ্য addEventListener()

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

আমরা ঘোষণা করতে পেরে আনন্দিত যে Chrome 55 passive ( Chrome 51-এ বাস্তবায়িত ) এবং capture অপশন ( Chrome 49 এ বাস্তবায়িত ) এর পাশাপাশি সেই কনফিগারেশন অবজেক্টে once বিকল্পের জন্য সমর্থন যোগ করে। যেমন:

element.addEventListener('click', myClickHandler, {
    once: true,
    passive: true,
    capture: true
});

আপনি আপনার নিজের ব্যবহারের ক্ষেত্রে উপযুক্ত হিসাবে সেই বিকল্পগুলিকে মিশ্রিত করতে এবং মেলাতে পারেন।

নিজের পরে পরিষ্কার করার সুবিধা

তাই যে নতুন once বিকল্প ব্যবহার করার জন্য সিনট্যাক্স, কিন্তু কি যে আপনি পেতে? সংক্ষেপে, এটি আপনাকে একটি ইভেন্ট শ্রোতা দেয় যা "একটি এবং সম্পন্ন" ব্যবহারের ক্ষেত্রে তৈরি।

ডিফল্টরূপে, ইভেন্ট শ্রোতারা প্রথমবার কল করার পরেও টিকে থাকে, যা আপনি কিছু ধরণের ইভেন্টের জন্য চান—উদাহরণস্বরূপ একাধিকবার ক্লিক করা যেতে পারে এমন বোতাম। অন্যান্য ব্যবহারের জন্য, যদিও, একটি ইভেন্ট শ্রোতা চারপাশে আটকে থাকা আবশ্যক নয়, এবং আপনার যদি একটি কলব্যাক থাকে যা শুধুমাত্র একবার কার্যকর করতে হবে তাহলে অবাঞ্ছিত আচরণ হতে পারে। হাইজেনিক ডেভেলপারদের কাছে সবসময়ই removeEventListener() ব্যবহার করে জিনিস পরিষ্কার করার বিকল্প থাকে, নিম্নলিখিত নিদর্শনগুলি যেমন:

element.addEventListener('click', function cb(event) {
    // ...one-time handling of the click event...
    event.currentTarget.removeEventListener(event.type, cb);
});

সমতুল্য কোড, নতুন once প্যারামিটার ব্যবহার করে, এটি ক্লিনার, এবং আপনাকে ইভেন্টের নাম ট্র্যাক রাখতে বাধ্য করে না ( event.type , আগের উদাহরণে) বা কলব্যাক ফাংশনের একটি রেফারেন্স ( cb ) :

element.addEventListener('click', function(event) {
    // ...one-time handling of the click event...
}, {once: true});

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

function setUpListeners() {
    var data = ['one', 'two', '...etc.'];

    window.addEventListener('load', function() {
    doSomethingWithSomeData(data);
    // data is now part of the callback's scope.
    });
}

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

ব্রাউজার সমর্থন

Chrome 55+, Firefox 50+, এবং Safari-এর প্রযুক্তি প্রিভিউ 7+-এ once বিকল্পের জন্য স্থানীয় সমর্থন রয়েছে।

অনেক জাভাস্ক্রিপ্ট UI লাইব্রেরি ইভেন্ট শ্রোতা তৈরি করার সুবিধার পদ্ধতি প্রদান করে এবং কিছুতে এককালীন ইভেন্ট নির্ধারণের জন্য শর্টকাট রয়েছে- যার মধ্যে সবচেয়ে উল্লেখযোগ্য হল jQuery এর one() পদ্ধতি । Andrea Giammarchi এর dom4 লাইব্রেরির অংশ হিসেবে একটি পলিফিলও পাওয়া যায়।

ধন্যবাদ

এই পোস্টে নমুনা কোড সম্পর্কে প্রতিক্রিয়ার জন্য ইঙ্গভার স্টেপানিয়ানকে ধন্যবাদ।