addEventListener বনাম অনক্লিক

Question

মধ্যে পার্থক্য কি addEventListenerএবং onclick?

var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);

উপরের কোডটি পৃথক .js ফাইলে একসাথে বাস করে এবং তারা উভয়ই নিখুঁতভাবে কাজ করে।

Answer 1

উভয়ই সঠিক, তবে সেগুলির মধ্যে কোনওটিই "প্রতি সেরা" নয় এবং বিকাশকারী উভয় পন্থা ব্যবহার করতে পছন্দ করেছেন এমন কোনও কারণ থাকতে পারে।

ইভেন্ট শ্রোতা (addEventListener এবং IE এর সংযুক্তি)

ইন্টারনেট এক্সপ্লোরারের পূর্ববর্তী সংস্করণগুলি প্রতিটি অন্যান্য ব্রাউজারের থেকে জাভাস্ক্রিপ্ট আলাদাভাবে প্রয়োগ করে। 9 টিরও কম সংস্করণ সহ, আপনি attachEvent[ ডক ] পদ্ধতিটি এইভাবে ব্যবহার করেন :

element.attachEvent('onclick', function() { /* do stuff here*/ });

বেশিরভাগ অন্যান্য ব্রাউজারগুলিতে (আই 9 বা তত্সহ উপরে) আপনি এইভাবেaddEventListener [ ডক ] ব্যবহার করেন :

element.addEventListener('click', function() { /* do stuff here*/ }, false);

এই পদ্ধতির ( DOM স্তর 2 ইভেন্ট ) ব্যবহার করে, আপনি কোনও একক উপাদানের সাথে তাত্ত্বিকভাবে সীমাহীন সংখ্যক ইভেন্ট সংযুক্ত করতে পারেন। একমাত্র ব্যবহারিক সীমাবদ্ধতা হ'ল ক্লায়েন্ট-সাইড মেমরি এবং অন্যান্য কর্মক্ষমতা সম্পর্কিত উদ্বেগ, যা প্রতিটি ব্রাউজারের জন্য আলাদা।

উপরের উদাহরণগুলি বেনামে ফাংশন [ ডক ] ব্যবহার করে উপস্থাপন করে । আপনি কোনও ফাংশন রেফারেন্স [ ডক ] বা একটি ক্লোজার [ ডক ] ব্যবহার করে ইভেন্ট শ্রোতাদেরও যুক্ত করতে পারেন :

var myFunctionReference = function() { /* do stuff here*/ }

element.attachEvent('onclick', myFunctionReference);
element.addEventListener('click', myFunctionReference , false);

এর আর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য addEventListenerহ'ল চূড়ান্ত প্যারামিটার, যা নিয়ন্ত্রণ করে যে শ্রোতা বুদবুদ ঘটনাগুলিতে [ ডক ] সম্পর্কে কী প্রতিক্রিয়া দেখায় । আমি উদাহরণগুলিতে ভ্রান্ত হয়ে যাচ্ছি, যা সম্ভবত 95% ব্যবহারের ক্ষেত্রে আদর্শ। attachEventইনলাইন ইভেন্টগুলি ব্যবহার করার জন্য বা এর জন্য কোনও সমতুল্য যুক্তি নেই ।

ইনলাইন ইভেন্টগুলি (এইচটিএমএল অনক্লিক = "" সম্পত্তি এবং এলিমেন্ট.অনলিক)

জাভাস্ক্রিপ্ট সমর্থন করে এমন সমস্ত ব্রাউজারগুলিতে আপনি কোনও ইভেন্ট শ্রোতাকে ইনলাইন রাখতে পারেন, যার অর্থ ঠিক এইচটিএমএল কোডের মধ্যে। আপনি সম্ভবত এটি দেখেছেন:

<a id="testing" href="#" onclick="alert('did stuff inline');">Click me</a>

বেশিরভাগ অভিজ্ঞ বিকাশকারীরা এই পদ্ধতিটিকে ত্যাগ করেন তবে এটি কাজটি করে দেয়; এটি সহজ এবং সরাসরি। আপনি এখানে ক্লোজার বা বেনামে ফাংশন ব্যবহার করতে পারবেন না (যদিও হ্যান্ডলার নিজেই হ'ল একটি বেনাম ফাংশন) এবং আপনার সুযোগ নিয়ন্ত্রণ সীমিত।

আপনি যে অন্যান্য পদ্ধতিটি উল্লেখ করেছেন:

element.onclick = function () { /*do stuff here */ };

... হ'ল ইনলাইন জাভাস্ক্রিপ্টের সমতুল্য ব্যতীত আপনার সুযোগের আরও নিয়ন্ত্রণ রয়েছে (যেহেতু আপনি HTML এর চেয়ে স্ক্রিপ্ট লিখছেন) এবং বেনামে ফাংশন, ফাংশন উল্লেখ এবং / অথবা ক্লোজারগুলি ব্যবহার করতে পারেন।

ইনলাইন ইভেন্টগুলির সাথে গুরুত্বপূর্ণ ত্রুটিটি হ'ল উপরের বর্ণিত ইভেন্ট শ্রোতার विपरीत, আপনার কেবলমাত্র একটি ইনলাইন ইভেন্ট বরাদ্দ থাকতে পারে। ইনলাইন ইভেন্টগুলি উপাদান [ ডক ] এর একটি বৈশিষ্ট্য / সম্পত্তি হিসাবে সংরক্ষণ করা হয় , যার অর্থ এটি ওভাররাইট করা যেতে পারে।

<a>উপরের এইচটিএমএল থেকে উদাহরণ ব্যবহার করে :

var element = document.getElementById('testing');
element.onclick = function () { alert('did stuff #1'); };
element.onclick = function () { alert('did stuff #2'); };

... আপনি যখন উপাদানটি ক্লিক করেছেন, আপনি কেবল "স্টাড # 2" দেখতে পেয়েছেন - আপনি onclickদ্বিতীয় মান সহ সম্পত্তিটির প্রথম নির্ধারিত ওভাররোট করেছিলেন এবং আপনি মূল ইনলাইন এইচটিএমএল onclickসম্পত্তিটিও ওভাররাইট করতে পারেন। এটি এখানে দেখুন: http://jsfiddle.net/jpgah/ ।

বিস্তৃতভাবে বলতে গেলে, ইনলাইন ইভেন্টগুলি ব্যবহার করবেন না । এটির জন্য সুনির্দিষ্ট ব্যবহারের কেস থাকতে পারে তবে আপনি যদি 100% নিশ্চিত না হন যে আপনার সেই ব্যবহারের ক্ষেত্রে রয়েছে তবে আপনি ইনলাইন ইভেন্টগুলি ব্যবহার করবেন না এবং ব্যবহার করবেন না।

আধুনিক জাভাস্ক্রিপ্ট (কৌণিক এবং মত)

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

<button (click)="doSomething()">Do Something</button>

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

কোনটি সেরা?

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

jQuery এবং অন্যান্য জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি জেনেরিক মডেলগুলিতে DOM স্তরের 2 ইভেন্টগুলির বিভিন্ন ব্রাউজার বাস্তবায়নের সজ্জিত করে যাতে আপনি বিদ্রোহী হিসাবে আই-এর ইতিহাস সম্পর্কে চিন্তা না করে ক্রস-ব্রাউজারের অনুগত কোডটি লিখতে পারেন। সমস্ত ক্রস ব্রাউজার এবং রক করার জন্য জিকুয়ের সাথে একই কোড:

$(element).on('click', function () { /* do stuff */ });

দৌড়াদৌড়ি করবেন না এবং কেবল এই একটি জিনিসের জন্য একটি কাঠামো পাবেন। পুরানো ব্রাউজারগুলির যত্ন নিতে আপনি সহজেই নিজের সামান্য উপযোগটি রোল করতে পারেন:

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

// example
addEvent(
    document.getElementById('myElement'),
    'click',
    function () { alert('hi!'); }
);

এটি ব্যবহার করে দেখুন: http://jsfiddle.net/bmArj/

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

ডকুমেন্টেশন এবং সম্পর্কিত পড়া

• ডাব্লু 3 এইচটিএমএল স্পেসিফিকেশন, উপাদান ইভেন্ট হ্যান্ডলার বৈশিষ্ট্য
• MDN এ এলিমেন্ট.এডএভেন্টলিস্টনার
• এমএসডিএন-এ এলিমেন্ট.এটাচএভেন্ট
• Jquery.on
• কুইর্কস্মোড ব্লগ "ইভেন্টগুলির পরিচিতি"
• গুগলে সিডিএন-হোস্ট করা জাভাস্ক্রিপ্ট লাইব্রেরি

Comments

: দুঃখিত আচমকা কিন্তু শুধু আপনার ফাংশন একটি সংক্ষিপ্ত সংস্করণ দিতে (বেহালার চেয়েছিলেন jsfiddle.net/bmArj/153 -)function addEvent(element, myEvent, fnc) { return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false)); }

— Deryck

@ গৌরব_সনি নং the ফাংশনের নাম এবং এতে থাকা সমস্ত কোড ইতিমধ্যে জাভাস্ক্রিপ্ট ফাইলটিতে উন্মুক্ত করা হয়েছে, যা সরলরেখায় রয়েছে। যে কেউ একটি ওয়েব কনসোল খুলতে এবং যে কোনও জাভাস্ক্রিপ্ট কার্যকর করতে বা পরিচালনা করতে পারে। আপনার জাভাস্ক্রিপ্টে যদি এমন কোনও কিছু থাকে যা জনসাধারণের সামনে উন্মুক্ত করা হয় তবে এটি সুরক্ষা ঝুঁকিপূর্ণ হতে পারে, তবে আপনি একটি বড় সমস্যা পেয়েছেন কারণ এটি ইতিমধ্যে জনসাধারণের সামনে উন্মুক্ত।

— ক্রিস বেকার

যতক্ষণ আমরা এই অ্যালগরিদমকে ঘনীভূত করছি, ততক্ষণে আমরা সমস্ত দিক দিয়ে যেতে পারি: function addEvent(e,n,f){return e.attachEvent?e.attachEvent('on'+n,f):e.addEventListener(n,f,!!0)}<< 98 টি অক্ষরে এটি 40% এরও বেশি ছোট!

— ট্রেভর

@ কৌতূহলের বাইরে ট্রেভর, কেন !! 0? কেন না! 1 বা মাত্র 0?

— ক্রিস বেকার

@ অ্যাড্রিয়ানমাইসা এই উত্তরটি এমন এক সময়ে লেখা হয়েছিল যখন অ্যাঙ্গুলারজেএস উত্থাপনের ক্ষেত্রে একটি নতুন জিনিস ছিল এবং সাধারণ অনুশীলনটি এখনও "প্রগতিশীল বৃদ্ধি" ছিল - এটি জাভাস্ক্রিপ্টের সাথে বা ছাড়াই কোনও HTML ডকুমেন্ট লিখতে পারে যা কাজ করে। সেই দৃষ্টিতে জাভাস্ক্রিপ্ট থেকে বাধ্যতামূলক ইভেন্টগুলি সেরা অনুশীলন হবে। আজকাল, আমি ভাবি না যে অনেকে প্রগতিশীল বর্ধনের বিষয়ে খুব বেশি চিন্তা করেন, বিশেষত অ্যাঙ্গুলারের মতো স্টাফের বিস্তারকে বিবেচনা না করে। ইনলাইন ইভেন্টগুলি (কৌণিক ব্যবহার না করে) নিয়ে উদ্বেগ যুক্তিগুলির কিছু বিচ্ছেদ এখনও রয়েছে, তবে এটি পদার্থের চেয়ে স্টাইল।

— ক্রিস বেকার

Answer 2

পার্থক্যটি আপনি দেখতে পেলেন যদি আপনার আরও কয়েকটি কার্যকারিতা থাকে:

var h = document.getElementById('a');
h.onclick = doThing_1;
h.onclick = doThing_2;

h.addEventListener('click', doThing_3);
h.addEventListener('click', doThing_4);

ফাংশন 2, 3 এবং 4 কাজ করে, তবে 1 কাজ করে না। এটি কারণ addEventListenerউপস্থিত ইভেন্ট হ্যান্ডলারগুলিকে ওভাররাইট করে না, যেখানে onclickকোনও বিদ্যমান onclick = fnইভেন্ট হ্যান্ডলারকে ওভাররাইড করে ।

অন্য উল্লেখযোগ্য পার্থক্যটি অবশ্যই এটি onclickসর্বদা কাজ করবে, যেখানে addEventListenerইন্টারনেট 9 এক্সপ্লোরার পূর্বে ইন্টারনেট এক্সপ্লোরারে কাজ করে না আপনি IE <9 এ অ্যানালগাস attachEvent(যার কিছুটা আলাদা সিনট্যাক্স রয়েছে) ব্যবহার করতে পারেন ।

Comments

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

— উইলিয়াম শাম

2, 3, এবং 4 এর নাম ডোজোমিং করা উচিত। 1 টি 2 দ্বারা ওভাররাইড হয়ে যায় এবং কখনও কল হয় না।

— ড্রাগনলর্ড

প্রকৃতপক্ষে একটি খুব স্পষ্ট এবং দৃষ্টিকোণ ব্যাখ্যা। এটি হ'ল ফাংশনগুলির নাম 'ডুথিং_1' ইত্যাদির নামকরণ করা প্রকৃতপক্ষে আরও অনেক বেশি জ্ঞাত হবে (আপনি যদি এখনও আইই <9 এর জন্য যত্ন নিতে চান তবে ক্রিসের উত্তর দেখুন))

— ফ্রাঙ্ক কনিজেন

Answer 3

এই উত্তরে আমি ডিওএম ইভেন্ট হ্যান্ডলারের সংজ্ঞা দেওয়ার তিনটি পদ্ধতি বর্ণনা করব।

element.addEventListener()

কোড উদাহরণ:

const element = document.querySelector('a');
element.addEventListener('click', event => event.preventDefault(), true);

<a href="//google.com">Try clicking this link.</a>

element.addEventListener() একাধিক সুবিধা রয়েছে:

• আপনাকে সীমাহীন ইভেন্ট হ্যান্ডলারের নিবন্ধকরণ এবং এগুলি সরাতে মঞ্জুরি দেয় element.removeEventListener()।
• আছে useCaptureপরামিতি, যা নির্দেশ করছে আপনি তার ইভেন্টের হ্যান্ডেল করতে চান কিনা ক্যাপচারিং বা ফেজ সাড়া জাগানো । দেখুন: addEventListener এ ব্যবহারের ক্যাপচার বৈশিষ্ট্যটি বুঝতে অক্ষম ।
• শব্দার্থবিদ্যা সম্পর্কে যত্নশীল । মূলত, এটি ইভেন্ট হ্যান্ডলারদের নিবন্ধকরণ আরও স্পষ্ট করে তোলে। একটি শিক্ষানবিসের জন্য, একটি ফাংশন কল এটি স্পষ্ট করে তোলে যে কিছু ঘটেছিল , অন্যদিকে ডিওএম উপাদানটির কোনও সম্পত্তিতে ইভেন্ট নির্ধারণ করা অন্তত স্বজ্ঞাত নয়।
• আপনাকে ডকুমেন্ট স্ট্রাকচার (এইচটিএমএল) এবং লজিক (জাভাস্ক্রিপ্ট) আলাদা করার অনুমতি দেয় । অতি ক্ষুদ্র ওয়েব অ্যাপ্লিকেশন এটা কোন ব্যাপার বলে মনে হচ্ছে না পারে, কিন্তু এটা করে কোনো বড় প্রকল্পের সঙ্গে ব্যাপার। কোনও প্রকল্প বজায় রাখা অনেক সহজ, যা না এমন প্রকল্পের চেয়ে কাঠামো এবং যুক্তিকে পৃথক করে।
• সঠিক ইভেন্টের নাম সহ বিভ্রান্তি দূর করে। ইনলাইন ইভেন্ট শ্রোতাদের ব্যবহার করার কারণে বা ইভেন্ট শ্রোতাদের .oneventডিওএম উপাদানগুলির বৈশিষ্ট্যগুলিতে নির্ধারিত করার কারণে , প্রচুর অনভিজ্ঞ জাভাস্ক্রিপ্ট প্রোগ্রামাররা মনে করেন ইভেন্টটির নাম উদাহরণস্বরূপ onclickবা onload। onহয় না অনুষ্ঠানের নাম এর একটি অংশ । ইভেন্টের সঠিক নামগুলি clickএবং loadএবং এভাবেই ইভেন্টের নামগুলি প্রেরণ করা হয় .addEventListener()।
• কাজ করে প্রায় সব ব্রাউজারে । যদি এখনও আপনাকে IE <= 8 সমর্থন করতে হয় তবে আপনি এমডিএন থেকে পলিফিল ব্যবহার করতে পারেন ।

element.onevent = function() {}(যেমন onclick, onload)

কোড উদাহরণ:

const element = document.querySelector('a');
element.onclick = event => event.preventDefault();

<a href="//google.com">Try clicking this link.</a>

এটি ডম 0 তে ইভেন্ট হ্যান্ডলারদের নিবন্ধ করার একটি উপায় ছিল এটি এখন নিরুৎসাহিত করা হয়েছে কারণ এটি:

• আপনাকে কেবলমাত্র একটি ইভেন্ট হ্যান্ডলার নিবন্ধন করতে দেয় । এছাড়াও নির্ধারিত হ্যান্ডলারটি অপসারণ করা স্বজ্ঞাত নয়, কারণ এই পদ্ধতিটি ব্যবহার করে নির্ধারিত ইভেন্ট হ্যান্ডলারটি সরাতে আপনাকে oneventসম্পত্তিটিকে তার প্রাথমিক অবস্থায় ফিরে যেতে হবে (অর্থাত্ null)।
• ত্রুটিগুলি যথাযথভাবে প্রতিক্রিয়া জানায় না । উদাহরণস্বরূপ, যদি আপনি ভুল করে কোনও স্ট্রিং নির্দিষ্ট করে থাকেন window.onload, উদাহরণস্বরূপ window.onload = "test";:, এটি কোনও ত্রুটি ছুঁড়ে ফেলবে না। আপনার কোডটি কাজ করে না এবং এটি কারণ খুঁজে পাওয়া সত্যিই কঠিন। .addEventListener()তবে ত্রুটি ছুঁড়ে ফেলবে (কমপক্ষে ফায়ারফক্সে): TypeError: EventTarget.addEventListener এর 2 টি আর্গুমেন্ট কোনও বস্তু নয় ।
• আপনি যদি ইভেন্টটিকে ক্যাপচারিং বা বুদবুদ পর্যায়ে পরিচালনা করতে চান তবে নির্বাচনের কোনও উপায় সরবরাহ করে না।

ইনলাইন ইভেন্ট হ্যান্ডলারগুলি ( oneventএইচটিএমএল বৈশিষ্ট্য)

কোড উদাহরণ:

<a href="//google.com" onclick="event.preventDefault();">Try clicking this link.</a>

একইভাবে element.onevent, এটি এখন নিরুৎসাহিত। সমস্যাগুলি ছাড়াও element.onevent, এটি:

• একটি সম্ভাব্য সুরক্ষা সমস্যা , কারণ এটি এক্সএসএসকে আরও ক্ষতিকারক করে তোলে। আজকাল ওয়েবসাইটগুলিতে Content-Security-Policyইনলাইন স্ক্রিপ্টগুলি ব্লক করার জন্য যথাযথ HTTP শিরোনাম প্রেরণ করা উচিত এবং কেবলমাত্র বিশ্বস্ত ডোমেনগুলি থেকে বাহ্যিক স্ক্রিপ্টগুলি মঞ্জুরি দেওয়া উচিত। দেখুন কিভাবে সামগ্রী নিরাপত্তা নীতি কাজ করে?
• নথির কাঠামো এবং যুক্তি আলাদা করে না ।
• যদি আপনি কোনও সার্ভার-সাইড স্ক্রিপ্ট দিয়ে আপনার পৃষ্ঠাটি উত্পন্ন করেন এবং উদাহরণস্বরূপ আপনি একই ইনলাইন ইভেন্ট হ্যান্ডলারের সাথে একশত লিঙ্ক তৈরি করেন তবে ইভেন্ট হ্যান্ডলারটি একবারে সংজ্ঞায়িত করা থাকলে আপনার কোডটি দীর্ঘতর হবে। এর অর্থ ক্লায়েন্টকে আরও সামগ্রী ডাউনলোড করতে হবে এবং ফলস্বরূপ আপনার ওয়েবসাইটটি ধীর হবে।

আরো দেখুন

• EventTarget.addEventListener()ডকুমেন্টেশন (MDN)
• EventTarget.removeEventListener()ডকুমেন্টেশন (MDN)
• অনক্লিক বনাম addEventListener
• Dom-ঘটনা ট্যাগ উইকি

Answer 4

onclickসমস্ত ব্রাউজারে কাজ করার সময় addEventListener, ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণগুলিতে কাজ করে না, যা attachEventপরিবর্তে ব্যবহার করে।

এর নেতিবাচক দিকটি onclickহ'ল কেবলমাত্র একটি ইভেন্ট হ্যান্ডলার থাকতে পারে, অন্য দু'জন সমস্ত নিবন্ধিত কলব্যাকগুলিকে সরিয়ে দেবে।

Answer 5

আমি যতদূর জানি, ডিওএম "লোড" ইভেন্টটি এখনও কেবল খুব সীমাবদ্ধভাবে কাজ করে। এর মানে হল যে এটি শুধুমাত্র জন্য ফায়ার করব window object, imagesএবং <script>উদাহরণস্বরূপ উপাদান। সরাসরি onloadঅ্যাসাইনমেন্টের ক্ষেত্রেও এটি একই রকম হয় । এই দুজনের মধ্যে কোনও প্রযুক্তিগত পার্থক্য নেই। সম্ভবত .onload =একটি আরও ভাল ক্রস ব্রাউজার উপলব্ধ আছে।

যাইহোক, আপনি load eventএকটি <div>বা <span>উপাদান বা হোয়টনোটকে একটি বরাদ্দ করতে পারবেন না ।

Answer 6

সারসংক্ষেপ:

1. addEventListenerএকাধিক ইভেন্ট যুক্ত onclickকরতে পারে , যদিও এর সাথে এটি করা যায় না।
2. onclickএকটি HTMLঅ্যাট্রিবিউট হিসাবে যুক্ত করা যেতে পারে , যখন একটি উপাদানগুলির addEventListenerমধ্যে কেবল যুক্ত করা যায় <script>।
3. addEventListener তৃতীয় যুক্তি নিতে পারে যা ইভেন্টের প্রচার বন্ধ করতে পারে।

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

Comments

এবং আপনি কীভাবে বেশিরভাগ এলিমেন্টকে লক্ষ্য করে কাজ করছেন? আমার অর্থ, onclickঘরটি হেসে যাওয়ার ভয়ে আমি ব্যক্তিগতভাবে ইনলাইন হ্যান্ডলার ব্যবহার করব না - তবে ঘটনাগুলি সাম্প্রতিক বছরগুলিতে অনেক খারাপ এবং কম রক্ষণাবেক্ষণের জন্য আবদ্ধ থাকে। ক্লাস পছন্দ js-link, js-form-validationবা ডেটা বৈশিষ্ট্যাবলী সঙ্গে data-jspackage="init"কোনো ভালো কোন ভাবেই হচ্ছে ... এবং কিভাবে ofteen আপনি আসলে কি ব্যবহার ঘটনা সাড়া জাগানো? আমি ব্যক্তিগতভাবে লক্ষ্যটি আমার উপাদানটির সাথে মিলছে কিনা তা পরীক্ষা করেই বা কোনও হ্যান্ডলার লিখতে সক্ষম হতে পছন্দ করব - বা এলোমেলো বাগের কারণে বেশ কয়েকটি জায়গায় প্রচার বন্ধ করে দেওয়া উচিত।

— ক্রিস্টোফার বুবাচ

Answer 7

একটি বিবরণ এখনও লক্ষ্য করা যায় নি: আধুনিক ডেস্কটপ ব্রাউজারগুলি ডিফল্টরূপে AddEventListener('click'এবং বিভিন্ন বোতামের প্রেসগুলিকে "ক্লিক" onclickহিসাবে বিবেচনা করে।

• ক্রোম 42 এবং আই 11, উভয় onclickএবংAddEventListener বাম এবং মাঝারি ফায়ার ক্লিক করুন।
• ফায়ারফক্স 38 তারিখে, onclickআগুন শুধুমাত্র বাম ক্লিক করুন, কিন্তু AddEventListenerবাম, মধ্যম উপর আগুন ক্লিক এবং ডান ক্লিক।

এছাড়াও, যখন স্ক্রোল কার্সর জড়িত থাকে তখন মিডল ক্লিকের আচরণ ব্রাউজারগুলিতে খুব বেমানান হয়:

• ফায়ারফক্সে, মিডল-ক্লিক ইভেন্টগুলি সর্বদা আগুন লাগে।
• ক্রোমে, যদি মিডলিক্লিক কোনও স্ক্রোল কার্সার খোলে বা বন্ধ করে দেয় তবে তারা গুলি চালাবে না।
• আইই তে, স্ক্রোল কার্সার বন্ধ হয়ে গেলে তারা গুলি চালায়, তবে এটি যখন খোলে তখন না।

এটি লক্ষ্য করার মতো যে যে কোনও কীবোর্ড-বাছাইযোগ্য এইচটিএমএল উপাদানগুলির জন্য "ক্লিক" ইভেন্টগুলি যেমন inputস্পেসে আগুন লাগায় বা উপাদানটি নির্বাচিত হওয়ার পরে প্রবেশ করান।

Answer 8

জাভাস্ক্রিপ্ট সব কিছুকে বস্তুর সাথে মিশ্রিত করে এবং এটিকে বিভ্রান্ত করতে পারে। সমস্ত এক মধ্যে জাভাস্ক্রিপ্ট উপায়।

মূলত অনক্লিক একটি HTML বৈশিষ্ট্য। বিপরীতে অ্যাডইভেন্টলিস্টনার হ'ল এইচটিএমএল উপাদান প্রতিনিধিত্ব করে ডিওএম অবজেক্টের একটি পদ্ধতি।

জাভাস্ক্রিপ্ট অবজেক্টগুলিতে, একটি পদ্ধতি কেবল একটি সম্পত্তি যা মান হিসাবে একটি ফাংশন রয়েছে এবং যা এটি যুক্ত করা বস্তুর বিরুদ্ধে কাজ করে (উদাহরণস্বরূপ এটি ব্যবহার করে)।

জাভাস্ক্রিপ্টে এইচটিএমএল উপাদান হিসাবে ডিওএম দ্বারা প্রতিনিধিত্ব করা হবে এর বৈশিষ্ট্যগুলিতে এটির বৈশিষ্ট্য ম্যাপ করা থাকবে।

এখান থেকেই লোকেরা বিভ্রান্ত হয় কারণ জাভাস্ক্রিপ্ট সবকিছুকে একটি একক ধারক বা নেমস্পেসে মেলে দেয় যেখানে কোনও ইন্ডিরিয়ার স্তর নেই with

একটি সাধারণ ওও লেআউটে (যা কমপক্ষে বৈশিষ্ট্য / পদ্ধতির নাম স্থানটি মার্জ করে) আপনার কাছে এমন কিছু থাকতে পারে:

domElement.addEventListener // Object(Method)
domElement.attributes.onload // Object(Property(Object(Property(String))))

বিভিন্ন বৈশিষ্ট্য যেমন এটি অনলোড বা হ্যাশম্যাপের জন্য গিটার / সেটার ব্যবহার করতে পারে তবে শেষ পর্যন্ত এটি দেখতে কেমন লাগে। জাভাস্ক্রিপ্ট অন্যান্য জিনিসের মধ্যে কী কী তা জানার প্রত্যাশায় সেই স্তরটিকে নির্মূল করে। এটি ডমএলিমেন্ট এবং বৈশিষ্ট্যগুলি একত্রিত করে।

অ্যাডএভেন্টলিস্টনার ব্যবহারের সেরা অনুশীলন হিসাবে আপনার উচিত সামঞ্জস্যতা বাদ দেওয়া। অন্যান্য উত্তরগুলি যেমন মৌলিক প্রোগ্রামেটিক পার্থক্যগুলির চেয়ে সে ক্ষেত্রে পার্থক্য সম্পর্কে কথা বলে আমি তা এড়িয়ে যাব। মূলত, একটি আদর্শ বিশ্বে আপনি কেবলমাত্র এইচটিএমএল থেকে * ব্যবহার করতে চান তবে আরও বেশি আদর্শ বিশ্বের ক্ষেত্রে আপনাকে এইচটিএমএল থেকে এমন কিছু করা উচিত নয়।

আজ কেন এটি প্রাধান্য পাচ্ছে? এটি লেখার পক্ষে দ্রুত, শিখতে সহজ এবং কেবল কাজ করার ঝোঁক।

এইচটিএমএল-এ অনলোডের পুরো পয়েন্টটি হ'ল প্রথম স্থানে অ্যাডএভেন্টলিস্টনার পদ্ধতি বা কার্যকারিতা অ্যাক্সেস দেওয়া। জেএস এ এটি ব্যবহার করে আপনি যখন এটি সরাসরি প্রয়োগ করতে পারেন আপনি এইচটিএমএল দিয়ে যাচ্ছেন through

হাইপোটিক্যালি আপনি নিজের বৈশিষ্ট্যগুলি তৈরি করতে পারেন:

$('[myclick]').each(function(i, v) {
     v.addEventListener('click', function() {
         eval(v.myclick); // eval($(v).attr('myclick'));
     });
});

জেএস যা করে তা তার থেকে কিছুটা আলাদা।

আপনি এটিকে কিছু তৈরি করতে (যেমন তৈরি প্রতিটি উপাদানের জন্য) করতে পারেন:

element.addEventListener('click', function() {
    switch(typeof element.onclick) {
          case 'string':eval(element.onclick);break;
          case 'function':element.onclick();break;
     }
});

বাস্তব প্রয়োগের বিশদটি সম্ভবত কিছু ক্ষেত্রে সূক্ষ্ম ভিন্নতার সাথে পৃথক হবে যা কিছু ক্ষেত্রে দু'টিকে কিছুটা আলাদা করেছে তবে এটি তার মূল বিষয়।

এটি যুক্তিযুক্তভাবে একটি সামঞ্জস্য হ্যাক যা আপনি ডিফল্ট বৈশিষ্ট্যগুলি সমস্ত স্ট্রিং থেকে কোনও বৈশিষ্ট্যে একটি ফাংশন পিন করতে পারেন।

Answer 9

এমডিএন অনুসারে , পার্থক্যটি নীচের মতো:

addEventListener:

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

onclick:

অনক্লিক সম্পত্তি বর্তমান উপাদানটিতে ক্লিক ইভেন্ট হ্যান্ডলার কোডটি প্রদান করে। কোনও ক্রিয়াকে ট্রিগার করতে ক্লিক ইভেন্টটি ব্যবহার করার সময়, মাউস বা টাচ স্ক্রিন ব্যবহার না করে এমন লোকদের দ্বারা একই ক্রিয়াটি ব্যবহারের অনুমতি দেওয়ার জন্য কীডাউন ইভেন্টে এই একই ক্রিয়াটি যুক্ত করার বিষয়টিও বিবেচনা করুন। সিনট্যাক্স এলিমেন্ট.অনলিক = ফাংশনফ; যেখানে ফাংশনফ একটি ফাংশন - প্রায়শই অন্য কোনও জায়গায় বা কোনও ফাংশন প্রকাশের কোনও ফাংশনের নাম ঘোষণা করা হয় of বিশদটির জন্য "জাভাস্ক্রিপ্ট গাইড: ফাংশন" দেখুন।

নীচের কোডগুলিতে আপনি যেমন ব্যবহার করছেন তেমন ব্যবহারের একটি বাক্য গঠন পার্থক্যও রয়েছে:

addEventListener:

// Function to change the content of t2
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

onclick:

function initElement() {
    var p = document.getElementById("foo");
    // NOTE: showAlert(); or showAlert(param); will NOT work here.
    // Must be a reference to a function name, not a function call.
    p.onclick = showAlert;
};

function showAlert(event) {
    alert("onclick Event detected!");
}

Answer 10

আপনি যদি ব্রাউজার সমর্থন সম্পর্কে খুব উদ্বিগ্ন না হন তবে ইভেন্টের দ্বারা ডাকা ফাংশনটিতে 'এটি' রেফারেন্সটি ফেরত দেওয়ার একটি উপায় রয়েছে। এটি সাধারণত ফাংশনটি কার্যকর হওয়ার সময় ইভেন্টটি উত্পন্ন করার উপাদানটির দিকে নির্দেশ করবে যা আপনি যা চান তা সবসময় হয় না। কৌশলপূর্ণ অংশটি একই সময়ে খুব একই ইভেন্ট শ্রোতাদের অপসারণ করতে সক্ষম হবে, যেমন এই উদাহরণে দেখানো হয়েছে: http://jsfiddle.net/roenbaeck/vBYu3/

/*
    Testing that the function returned from bind is rereferenceable, 
    such that it can be added and removed as an event listener.
*/
function MyImportantCalloutToYou(message, otherMessage) {
    // the following is necessary as calling bind again does 
    // not return the same function, so instead we replace the 
    // original function with the one bound to this instance
    this.swap = this.swap.bind(this); 
    this.element = document.createElement('div');
    this.element.addEventListener('click', this.swap, false);
    document.body.appendChild(this.element);
}
MyImportantCalloutToYou.prototype = {
    element: null,
    swap: function() {
        // now this function can be properly removed 
        this.element.removeEventListener('click', this.swap, false);           
    }
}

উপরের কোডটি Chrome এ ভাল কাজ করে এবং সম্ভবত অন্যান্য ব্রাউজারগুলির সাথে "বাইন্ড" সামঞ্জস্যপূর্ণ কিছু শিম আছে।

Answer 11

ইনলাইন হ্যান্ডলারগুলি ব্যবহার করা বিষয়বস্তু সুরক্ষা নীতিমালার সাথে সঙ্গতিপূর্ণ নয় যাতে addEventListenerদৃষ্টিভঙ্গিটি সেই দৃষ্টিকোণ থেকে আরও সুরক্ষিত। অবশ্যই আপনি এর সাথে ইনলাইন হ্যান্ডলারগুলি সক্ষম করতে পারেন unsafe-inlineতবে নাম হিসাবে যেমনটি বলা হয় এটি নিরাপদ নয় কারণ এটি জাভাস্ক্রিপ্টের পুরো জোড়কে সিএসপি প্রতিরোধকারী ফিরিয়ে আনে।

Comments

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

— ক্রিস বেকার

Answer 12

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

মত

    elm.onclick = myFunctionList
    function myFunctionList(){
      myFunc1();
      myFunc2();
    }

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

ভবিষ্যতে কেউ যদি এই থ্রেডটি খুঁজে পান ...

Answer 13

এলিমেন্ট.অনল্লিক = ফাংশন () * / * স্টাফ করুন * /}

এলিমেন্ট.এডএভেন্টলিস্টনার ('ক্লিক', ফাংশন () {/ * স্টাফ করুন * /}, মিথ্যা);

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

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

এটি ব্যবহার করে দেখুন: https://jsfiddle.net/fjets5z4/5/

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

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

var clickEvent = document.getElementByID("onclick-eg");
var EventListener = document.getElementByID("addEventListener-eg");

clickEvent.onclick = function(){
    window.alert("1 is not called")
}
clickEvent.onclick = function(){
    window.alert("2 is not called")
}

EventListener.addEventListener("click",function(){
    window.alert("1 is called")
})
EventListener.addEventListener("click",function(){
    window.alert("2 is also called")
})

Answer 14

addEventListener আপনাকে একাধিক হ্যান্ডলার সেট করতে দেয় তবে আইই 8 বা তার চেয়ে কম সমর্থন করে না।

আইআই আছে attachEvent, কিন্তু এটি ঠিক একই নয়।

Answer 15

প্রসঙ্গটি রেফারেন্স করেছেন 'this'জাভাস্রিপ্টে কীওয়ার্ড আলাদা।

নিম্নলিখিত কোডটি দেখুন:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

</head>
<body>
    <input id="btnSubmit" type="button" value="Submit" />
    <script>
        function disable() {
            this.disabled = true;
        }
        var btnSubmit = document.getElementById('btnSubmit');
        btnSubmit.onclick = disable();
        //btnSubmit.addEventListener('click', disable, false);
    </script>
</body>
</html>

এটি কি সত্যিই সহজ। আপনি বোতামটি ক্লিক করলে, বোতামটি স্বয়ংক্রিয়ভাবে অক্ষম হয়ে যাবে।

প্রথমে আপনি যখন ইভেন্টগুলিকে এইভাবে হুক করার চেষ্টা করবেন তখন button.onclick = function(), অনক্লিক ইভেন্টটি বোতামটি ক্লিক করে ট্রিগার করা হবে, তবে বোতামটি অক্ষম করা হবে না কারণ বাটন.অনলিক এবং অন্লিক ইভেন্ট হ্যান্ডলারের মধ্যে কোনও স্পষ্টভাবে আবদ্ধ নেই। আপনি যদি ডিবাগটি 'this'অবজেক্টটি দেখতে পান তবে আপনি এটি দেখতে পেয়েছেন refers'window' ।

দ্বিতীয়ত, যদি আপনি মন্তব্য করেন btnSubmit.onclick = disable();এবং //btnSubmit.addEventListener('click', disable, false);কোনও অসুবিধে না করতে পারেন তবে দেখতে পাবেন যে বোতামটি অক্ষম হয়ে গেছে কারণ এইভাবে বাটন.অনলিক ইভেন্ট এবং অন্লিক ইভেন্ট হ্যান্ডলারের মধ্যে স্পষ্টভাবে আবদ্ধ রয়েছে। আপনি নিষ্ক্রিয় ফাংশন মধ্যে ডিবাগ তাহলে, আপনি দেখতে পারেন 'this'বোঝায় button controlবদলেwindow ।

এটি জাভাস্ক্রিপ্ট সম্পর্কে আমি পছন্দ করি না যা অসঙ্গতি। বিটিডব্লিউ, আপনি যদি jQuery ( $('#btnSubmit').on('click', disable);) ব্যবহার করেন তবে এটি সুস্পষ্ট বাইন্ডিং ব্যবহার করে।

Comments

আপনাকে লিখতে হবে btnSubmit.onclick = disable;(ফাংশন বরাদ্দ করুন, এটি কল করবেন না)। তারপরে উভয় ক্ষেত্রেই thisবোতামের উপাদানটি উল্লেখ করা হবে।

— পাশা

Answer 16

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

দ্রষ্টব্য, আপনি প্রকৃতপক্ষে ইনলাইন সহ একাধিক ইভেন্ট ব্যবহার করতে পারেন, বা কমপক্ষে অনক্লিক ব্যবহার করে প্রতিটি ফাংশনকে সেমি-কোলনের সাথে পৃথক করে এভাবে ব্যবহার করতে পারেন ....

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

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