133

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

<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

javascript html

— NiLL
সূত্র

10

en.wikedia.org/wiki/Unobtrusive_ জাভা স্ক্রিপ্ট

— রকেট হাজমত

4

অন্লিক্সে কোনও সমস্যা নেই, তবে এইচআরএফ তৈরি করে #, যে কেউ জাভাস্ক্রিপ্ট অক্ষম করতে পছন্দ করে সে আটকে থাকবে এবং কিছু করতে অক্ষম হবে। কিছু সাইটের জন্য এটি একটি ভাল জিনিস, তবে কেবল একটি উইন্ডো খোলার জন্য, "সত্যিকারের" লিঙ্কটি সরবরাহ না করা একেবারে বোকা।

— মার্ক বি

2

অবশ্যই এই লিঙ্কটি পড়ুন। শব্দার্থবিদ্যার সাথে এর খুব সামান্য কিছু আছে, এবং আরও কিছু করার জন্য ... সেই পৃষ্ঠায় থাকা সমস্ত জিনিস :-)

— ইচ্ছুক

একটি নতুন ট্যাবে আপনার লিঙ্কটি খোলার চেষ্টা করুন, এবং এটি কেন ভুল হয়েছে তার একটি উদাহরণ আপনি দেখতে পাবেন ...

— সেবাস্তিয়ান সি।

2

এটি একটি হওয়া উচিত <button>, কারণ লিঙ্কগুলি একটি আসল সংস্থানকে নির্দেশ করার কথা। এটি সেভাবে আরও শব্দার্থক এবং স্ক্রিন রিডার ব্যবহারকারীদের জন্য আরও স্পষ্ট।

— প্রোগ্রামার

171

আপনি সম্ভবত নিরর্থক জাভাস্ক্রিপ্ট সম্পর্কে কথা বলছেন , যা দেখতে এটির মতো দেখাবে:

<a href="#" id="someLink">link</a>

কেন্দ্রীয় জাভাস্ক্রিপ্ট ফাইলে এমন কিছু যুক্তিযুক্ত যুক্তি সহ:

$('#someLink').click(function(){
    popup('/map/', 300, 300, 'map'); 
    return false;
});

সুবিধাগুলি হ'ল

আচরণ (জাভাস্ক্রিপ্ট) উপস্থাপনা থেকে পৃথক করা হয় (এইচটিএমএল)
কোনও ভাষার মিশ্রণ নেই
আপনি jQuery এর মতো একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করছেন যা আপনার জন্য সর্বাধিক ক্রস ব্রাউজার সমস্যাগুলি পরিচালনা করতে পারে
কোড নকল ছাড়াই আপনি একবারে অনেকগুলি HTML উপাদানগুলিতে আচরণ যুক্ত করতে পারেন

— মাইকেল বর্গওয়ার্ট
সূত্র

30

আপনি বেশ কয়েকটি সুবিধাগুলি তালিকাভুক্ত করেছেন, তবে অসুবিধাগুলির কী হবে? ডিবাগিং নীল ধোঁয়া?

— অ্যাবেলিটো

2

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

— নাঃ

45

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

— মাইকেল বর্গওয়ার্ট

1

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

— নাঃ

4

অবিশ্বাস্যদের সাথে এই আলোচনার আরেকটি বিষয় - এটি onclickআরও বেশি স্পষ্টভাবে উপাদান ইন্টারঅ্যাকশন এবং এফেক্ট (ফাংশন কল) এর মধ্যে কার্যকারক সম্পর্কের পাশাপাশি জ্ঞানীয় বোঝা হ্রাস করতে পারে। অনেক পাঠ শিখায় নিক্ষেপকারীদের মধ্যে ফেলে দেয় addEventListenerযা আরও জটিল ধারণা বাক্সে আরও অনেক ধারণাকে প্যাক করে। তদ্ব্যতীত, দাঙ্গা এবং প্রতিক্রিয়া জাতীয় সাম্প্রতিক উপাদান ভিত্তিক কাঠামোগত onclickবৈশিষ্ট্যটি ব্যবহার করে এবং কী কী বিচ্ছেদ হওয়া উচিত তা ধারণা পরিবর্তন করে। এইচটিএমএল onclickথেকে এমন উপাদানগুলিতে স্থানান্তর করা যা এটি সমর্থন করে তা শেখার জন্য আরও কার্যকর "পদক্ষেপ" প্রক্রিয়া হতে পারে।

— jmk2142

41

আপনি যদি jQuery ব্যবহার করেন তবে:

এইচটিএমএল:

 <a id="openMap" href="/map/">link</a>

জাতীয়:

$(document).ready(function() {
    $("#openMap").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });
});

এটি এখনও জেএস ছাড়াই কাজ করার সুবিধা রয়েছে বা যদি ব্যবহারকারী মধ্যম লিঙ্কটি ক্লিক করে।

এর অর্থ হ'ল আমি আবার লিখিতভাবে জেনেরিক পপআপগুলি পরিচালনা করতে পারি:

এইচটিএমএল:

 <a class="popup" href="/map/">link</a>

জাতীয়:

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), 300, 300, 'map');
        return false;
    });
});

এটি আপনাকে কেবল পপআপ ক্লাস দিয়ে কোনও লিঙ্কে একটি পপআপ যুক্ত করতে দেয়।

এই ধারণাটি এর মতো আরও বাড়ানো যেতে পারে:

এইচটিএমএল:

 <a class="popup" data-width="300" data-height="300" href="/map/">link</a>

জাতীয়:

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
        return false;
    });
});

আমি এখন আমার সম্পূর্ণ সাইটে প্রচুর পপআপের জন্য একই বিট কোড ব্যবহার করতে পারি অনক্লিক স্টাফের প্রচুর পরিমাণে না লিখে! পুনরায় ব্যবহারযোগ্যতার জন্য হ্যাঁ!

এর অর্থ এইও হয় যে পরে যদি আমি সিদ্ধান্ত নিই যে পপআপগুলি খারাপ অভ্যাস, (যা তারা!) এবং আমি এগুলিকে একটি লাইটবক্স শৈলীর মডেল উইন্ডো দিয়ে প্রতিস্থাপন করতে চাই তবে আমি পরিবর্তন করতে পারি:

popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

প্রতি

myAmazingModalWindow($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

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

— ধনী ব্র্যাডশো
সূত্র

4

জাভাস্ক্রিপ্ট ছাড়া কাজ করে ?? এটি jQuery। এটি কাজ করার জন্য ব্রাউজারে জাভাস্ক্রিপ্ট সক্ষম হওয়া দরকার?

— থমাস শিল্ডস

2

হ্যাঁ, তবে লিঙ্কটি এই ক্ষেত্রে জাভাস্ক্রিপ্ট ছাড়াই ক্রিয়া সম্পাদন করে এমন কোনও পৃষ্ঠায় পুনর্নির্দেশ করতে পারে।

— চোরমাস্টার

12

লিংক জাভাস্ক্রিপ্ট ছাড়া কাজ করে। লিঙ্কটিতে কীভাবে একটি সাধারণ href বৈশিষ্ট্য রয়েছে তা দেখুন। যদি ব্যবহারকারীর জাভাস্ক্রিপ্ট না থাকে তবে লিঙ্কটি এখনও একটি লিঙ্ক হবে এবং ব্যবহারকারী এখনও সামগ্রীটি অ্যাক্সেস করতে পারবেন।

— morewry

3

@ থমাস শিল্ডস: না, তার অর্থ হ'ল যদি আপনার কাছে জাভাস্ক্রিপ্ট না থাকে তবে লিঙ্কটি আপনাকে এখনও / মানচিত্রে নিয়ে যাবে ...

— রবার্ট

2

আহ ধনী! আমরা আপনাকে এই নিফটিস্ট সমাধানের জন্য ভালবাসি!

— নির্মল

21

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

আপনি সম্ভবত জেএস ফাইলগুলি দেখতে পেয়েছেন ...

(function(){
    ...[some code]
}());

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

আপনি যদি function doSomething(){}কোনও আইআইএফইর মধ্যে ঘোষণা করেন তবে তৈরি করুনdoSomething() আপনার HTML পৃষ্ঠায় কোনও উপাদানটির অন ক্লিক ক্লিক করুন, আপনি একটি ত্রুটি পাবেন।

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

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

— LetMyPeopleCode
সূত্র

1

আপনি যদি বৃহত, রক্ষণাবেক্ষণযোগ্য

— কোডবেসগুলিতে অ্যাংুলার, ভ্যু

20

এটি বেশ কয়েকটি কারণে ভাল নয়:

এটি কোড এবং মার্কআপ মিশ্রিত করে
কোড লিখিতভাবে এই মাধ্যমে যায় eval
এবং বিশ্বব্যাপী স্কোপে চলে runs

সবচেয়ে সহজ জিনিসটি হ'ল nameআপনার <a>উপাদানটিতে একটি গুণ যুক্ত করা , তবে আপনি এটি করতে পারেন:

document.myelement.onclick = function() {
    window.popup('/map/', 300, 300, 'map');
    return false;
};

যদিও আধুনিক সেরা অনুশীলনটি idহ'ল নামের পরিবর্তে একটি ব্যবহার addEventListener()করা এবং ব্যবহারের পরিবর্তে ব্যবহার করা onclickকারণ এটি আপনাকে একক ইভেন্টে একাধিক ফাংশন বাঁধতে দেয়।

— ঊষা
সূত্র

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

— প্রেগেশন

3

@ প্রতিক্রিয়া ঠিক যেমন একটি ইনলাইন ইভেন্ট হ্যান্ডলার করে, তাই কেন আমার উত্তর বলে যে এটি ব্যবহার করা ভাল addEventListener()এবং কেন।

— Alnitak

2

কেউ এই আরও ব্যাখ্যা করতে পারেন? "এইভাবে লেখা কোডটি ইভাল মাধ্যমে যায়" ... আমি ওয়েবে এ সম্পর্কে কিছুই পাই না। আপনি কি বলছেন যে ইনলাইন জাভাস্ক্রিপ্ট ব্যবহার করার ক্ষেত্রে কিছু কার্যকারিতা বা সুরক্ষা অসুবিধা রয়েছে?

— মার্সএন্ডব্যাক

12

এখানে কিছু কারন আছে:

আমি এটিকে মূলতত্বকে পৃথক মার্কআপ, যেমন HTML এবং ক্লায়েন্ট-সাইড স্ক্রিপ্টগুলিতে সহায়তা করে। উদাহরণস্বরূপ, jQuery প্রোগ্রাম হ্যান্ডলারগুলিকে প্রোগ্রামক্রমে যুক্ত করা সহজ করে তোলে।
আপনার দেওয়া উদাহরণটি জাভাস্ক্রিপ্ট সমর্থন করে না এমন জাভাস্ক্রিপ্ট বন্ধ করে দেওয়া বা ব্যবহারকারীর এজেন্টে ভাঙা হবে। প্রগতিশীল বর্ধনের ধারণাটি /map/জাভাস্ক্রিপ্ট ছাড়াই ব্যবহারকারী এজেন্টদের জন্য একটি সাধারণ হাইপারলিংককে উত্সাহিত করবে , তারপরে জাভাস্ক্রিপ্ট সমর্থনকারী ব্যবহারকারী এজেন্টদের জন্য প্রাথমিকভাবে ক্লিক হ্যান্ডলার যুক্ত করুন।

উদাহরণ স্বরূপ:

মার্কআপ:

<a id="example" href="/map/">link</a>

javascript:

$(document).ready(function(){

    $("#example").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });

})

— গ্রাহাম
সূত্র

2

আমাকে প্রগতিশীল বর্ধনের কথা মনে করিয়ে দেওয়ার জন্য ধন্যবাদ এবং তাই এটি এখনও সেই দৃষ্টান্তটি ফিট করে:<a href="https://stackoverflow.com/map/" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

— ড্যানিয়েল সোকলোভস্কি

10

সংস্করণ

অতীত সময়ে নিরবচ্ছিন্ন জাভাস্ক্রিপ্টের পদ্ধতিটি ভাল ছিল - বিশেষত এইচটিএমএল-এ ইভেন্ট হ্যান্ডলার বাঁধাই খারাপ অনুশীলন হিসাবে বিবেচিত হত (মূলত কারণ ইহুদী নিনজাonclick events run in the global scope and may cause unexpected error উল্লেখ করেছিলেন )

যাহোক...

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

<button (click)="someAction()">Click Me</button>

কাঁচা জেএস / এইচটিএমএল এর সমতুল্য হবে

<button onclick="someAction()">Click Me</button>

পার্থক্যটি হ'ল কাঁচা জেএসে onclick ইভেন্টটি বিশ্ব ব্যাপ্তিতে চালিত হয় - তবে ফ্রেমওয়ার্কগুলি এনক্যাপসুলেশন সরবরাহ করে।

তাহলে সমস্যা কোথায়?

সমস্যাটি তখন যখন নবজাতক প্রোগ্রামার যিনি সর্বদা শুনেছিলেন যে এইচটিএমএল-অন্লিক খারাপ এবং যে সর্বদা ব্যবহার করে btn.addEventListener("onclick", ... )তারা টেমপ্লেটগুলি সহ কিছু কাঠামো ব্যবহার করতে চায় ( addEventListenerএছাড়াও ত্রুটি রয়েছে - যদি আমরা ডমকে ডায়নামিক পদ্ধতিতে আপডেট করি innerHTML=(যা বেশ দ্রুত ) তবে আমরা ইভেন্টগুলি আলগা করি loose হ্যান্ডলাররা সেভাবে বাঁধেন)। তারপরে তিনি কাঠামোগত ব্যবহারের জন্য খারাপ অভ্যাস বা ভুল-পদ্ধতির মতো কিছু মুখোমুখি হবেন - এবং তিনি খুব খারাপ উপায়ে কাঠামো ব্যবহার করবেন - কারণ তিনি মূলত জেএস-অংশে এবং টেম্পলেট অংশের উপর না কেন্দ্রীভূত করবেন (এবং অস্পষ্ট এবং বজায় রাখা কঠিন উত্পাদন করবেন) কোড)। এই অভ্যাসটি পরিবর্তন করতে তিনি অনেক সময় শিথিল করবেন (এবং সম্ভবত তার জন্য কিছু ভাগ্য এবং শিক্ষকের প্রয়োজন হবে)।

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

তো এখন কি করা?

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

<button onclick="someAction(3)">Click Me</button>

অথবা

কোড স্নিপেট দেখান

function popup(num,str,event) {
   let re=new RegExp(str);  
   // ... 
   event.preventDefault();
   console.log("link was clicked");
}

<a href="https://example.com" onclick="popup(300,'map',event)">link</a>

স্নিপেট প্রসারিত করুন

তবে নীচে উদাহরণগুলির অনুমতি দেওয়া উচিত নয়

<button onclick="console.log('xx'); someAction(); return true">Click Me</button>

<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

বাস্তবতা পরিবর্তিত হয়, আমাদের দৃষ্টিকোণও উচিত

— কামিল কিয়েসজেউস্কি
সূত্র

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

— মিরজাল

1

বিজ্ঞাপন 1. হ্যাঁ কেবল একটি, তবে আমার অভিজ্ঞতা (কৌনিক সহ) দেখায় যে এটি বেশিরভাগ পরিস্থিতিতেই যথেষ্ট - তবে যদি না হয় তবে কেবল ব্যবহার করুন addEventListener। বিজ্ঞাপন 2. হ্যাঁ এগুলি ওভাররাইট করা যেতে পারে (তবে সাধারণত কেউ তা করেন না) - সমস্যা কোথায়? বিজ্ঞাপন 3. হ্যান্ডলারের

— অনক্লিক বৈশিষ্ট্য

8

এটি " অনাবৃত জাভাস্ক্রিপ্ট " নামে একটি ~~নতুন~~ দৃষ্টান্ত । বর্তমান "ওয়েব স্ট্যান্ডার্ড" বলছে পৃথক কার্যকারিতা এবং উপস্থাপনা।

এটি আসলে একটি "খারাপ অনুশীলন" নয়, এটি কেবলমাত্র নতুন মানগুলি জাভাস্ক্রিপ্ট-ইন-লাইনের পরিবর্তে ইভেন্ট শ্রোতাদের ব্যবহার করতে চান।

এছাড়াও, এটি কেবল একটি ব্যক্তিগত জিনিস হতে পারে, তবে আমি মনে করি আপনি যখন ইভেন্ট শ্রোতাদের ব্যবহার করবেন তখন এটি পড়া অনেক সহজ especially

— রকেট হাজমত
সূত্র

2

বিষয়টির উইকিপিডিয়া পৃষ্ঠাটি 4 বছরেরও বেশি পুরানো। এটি আর কোনও নতুন দৃষ্টান্ত নয় । :)

— কোয়ান্টিন

@ ডেভিড: এটি "নতুন" নাও হতে পারে, তবে এখনও লোকেরা এটি ব্যবহার করছে না, সুতরাং এটি তাদের কাছে "নতুন"।

— রকেট হাজমত

6

আমি মনে করি আপনার প্রশ্নটি আলোচনার সূত্রপাত করবে। সাধারণ ধারণাটি হ'ল আচরণ এবং কাঠামো আলাদা করা ভাল। তদুপরি, আফাইক, একটি ইনলাইন ক্লিক হ্যান্ডলারের evalএকটি সত্যিকারের জাভাস্ক্রিপ্ট ফাংশন 'হয়ে' যেতে হবে led এবং এটি বেশ পুরানো ফ্যাশন, যদিও এটি একটি বেশ নড়বড়ে যুক্তি। আহ, ভাল, এটি সম্পর্কে কিছু পড়ুন @ quirksmode.org

— KooiInc
সূত্র

আমি আর একবার পবিত্র যুদ্ধ তৈরি করতে চাই না, আমি সত্যটি চেষ্টা করার চেষ্টা করছি:

— Ni

2

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

— Minghuan
সূত্র

0

ইনলাইন হ্যান্ডলারগুলি ব্যবহার না করার জন্য আরও দুটি কারণ:

তারা ক্লান্তিকর উদ্ধৃতি ইস্যু সমস্যা প্রয়োজন হতে পারে

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

const str = prompt('What string to display on click?', 'foo\'"bar');
const escapedStr = str
  // since the attribute value is going to be using " delimiters,
  // replace "s with their corresponding HTML entity:
  .replace(/"/g, '&quot;')
  // since the string literal inside the attribute is going to delimited with 's,
  // escape 's:
  .replace(/'/g, "\\'");
  
document.body.insertAdjacentHTML(
  'beforeend',
  '<button onclick="alert(\'' + escapedStr + '\')">click</button>'
);

স্নিপেট প্রসারিত করুন

এটি অবিশ্বাস্যভাবে কুরুচিপূর্ণ। উপরের উদাহরণ থেকে, আপনি যদি 'এইগুলি প্রতিস্থাপন না করেন , তবে একটি alert('foo'"bar')সিনট্যাক্সেরর ফলাফল হবে, কারণ বৈধ সিনট্যাক্স নয়। যদি আপনি এরগুলি প্রতিস্থাপন না করেন ", তবে ব্রাউজারটি onclickএট্রিবিউটটির শেষ হিসাবে এটি ব্যাখ্যা করবে (এর সাথে সীমিত)" উপরে বর্ণিত) , যা ভুলও হবে।

যদি কেউ অভ্যাসগতভাবে ইনলাইন হ্যান্ডলারগুলি ব্যবহার করে তবে প্রত্যেককে উপরের মতো কিছু করার (এবং এটি সঠিকভাবে করা ) মনে রাখতে হবে যা এক নজরে বোঝা ক্লান্তিকর এবং শক্ত। সম্পূর্ণরূপে ইনলাইন হ্যান্ডলারগুলি এড়ানো ভাল the

const str = prompt('What string to display on click?', 'foo\'"bar');
const button = document.body.appendChild(document.createElement('button'));
button.textContent = 'click';
button.onclick = () => alert(str);

স্নিপেট প্রসারিত করুন

এত সুন্দর না?

একটি ইনলাইন হ্যান্ডলারের স্কোপ চেইন অত্যন্ত বিচিত্র

আপনি কি মনে করেন যে নীচের কোডটি লগ করবে?

let disabled = true;

<form>
  <button onclick="console.log(disabled);">click</button>
</form>

স্নিপেট প্রসারিত করুন

এটি চেষ্টা করুন, স্নিপেট চালান। এটি সম্ভবত আপনি প্রত্যাশা ছিল না। এটি যা করে তা উত্পাদন করে কেন? কারণ ইনলাইন হ্যান্ডলারগুলি withব্লকের ভিতরে চলে । উপরের কোডটি তিনটি with ব্লকের ভিতরে রয়েছে : একটির জন্য document, একটিটির জন্য <form>এবং একটি <button>:

কোড স্নিপেট দেখান

let disabled = true;

<form>
  <button onclick="console.log(disabled);">click</button>
</form>

স্নিপেট প্রসারিত করুন

যেহেতু disabledবোতামটির একটি সম্পত্তি, তাই disabledইনলাইন হ্যান্ডলারের অভ্যন্তরে উল্লেখ করা বাইরের disabledভেরিয়েবলের পরিবর্তে বোতামের সম্পত্তি বোঝায় to এটি বেশ পাল্টা স্বজ্ঞাত। withঅনেকগুলি সমস্যা রয়েছে: এটি বিভ্রান্তিকর বাগের উত্স হতে পারে এবং কোডটি উল্লেখযোগ্যভাবে কমিয়ে দেয়। এমনকি কঠোর মোডে একেবারেই অনুমোদিত নয়। তবে ইনলাইন হ্যান্ডলারগুলির সাহায্যে আপনি কোডগুলি এস এর মাধ্যমে চালাতে বাধ্য হন with- এবং কেবল একটির মাধ্যমে নয় with, একাধিক নেস্টেড withএস এর মাধ্যমে । এটা পাগলামী.

withকোড ব্যবহার করা উচিত নয়। যেহেতু ইনলাইন হ্যান্ডলারগুলি withতার সমস্ত বিভ্রান্তিমূলক আচরণের সাথে স্পষ্টভাবে আবশ্যক, ইনলাইন হ্যান্ডলারগুলিও এড়ানো উচিত।

— CertainPerformance
সূত্র

এইচটিএমএলে অনক্লিক () ব্যবহার করা কেন খারাপ অভ্যাস?

সংস্করণ

যাহোক...

তাহলে সমস্যা কোথায়?

তো এখন কি করা?

তারা ক্লান্তিকর উদ্ধৃতি ইস্যু সমস্যা প্রয়োজন হতে পারে

একটি ইনলাইন হ্যান্ডলারের স্কোপ চেইন অত্যন্ত বিচিত্র