jQuery.click () বনাম অনক্লিক

Question

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

প্রথম পদ্ধতি

এইচটিএমএল

<div id="myDiv">Some Content</div>

jQuery এর

$('#myDiv').click(function(){
    //Some code
});

দ্বিতীয় পদ্ধতি

এইচটিএমএল

<div id="myDiv" onClick="divFunction()">Some Content</div>

জাভাস্ক্রিপ্ট ফাংশন কল

function divFunction(){
    //Some code
}

আমি আমার অ্যাপ্লিকেশনটিতে প্রথম বা দ্বিতীয় পদ্ধতি ব্যবহার করি। কোনটা ভালো? পারফরম্যান্সের জন্য আরও ভাল? আর স্ট্যান্ডার্ড?

Comments

আপনি এখানে ইভেন্ট হ্যান্ডলার এবং তাদের সুবিধার / অসুবিধেও সংযুক্ত করতে বিভিন্ন উপায়ে সম্পর্কে শিখতে পারেন: quirksmode.org/js/introevents.html । উন্নত ইভেন্ট নিবন্ধকরণের জন্য jQuery হ'ল একটি দুর্দান্ত মোড়ক।

— ফেলিক্স ক্লিং

ক্লিক ফাংশনটি $ (দস্তাবেজ) এর ভিতরে রাখতে ভুলবেন না। প্রস্তুত (ফাংশন ()

— joan16v

Answer 1

ব্যবহার $('#myDiv').click(function(){হয় ভাল যেমন মান ঘটনা নিবন্ধন মডেল অনুসরণ করে। (jQuery অভ্যন্তরীণভাবে ব্যবহার করে addEventListenerএবং attachEvent)।

মূলত একটি ইভেন্টটিকে আধুনিক উপায়ে নিবন্ধন করা হ'ল ইভেন্টগুলি পরিচালনা করার অবিচ্ছিন্ন উপায়। এছাড়াও লক্ষ্যটির জন্য একাধিক ইভেন্ট শ্রোতার নিবন্ধন করতে আপনি addEventListener()একই লক্ষ্যটির জন্য কল করতে পারেন ।

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

http://jsfiddle.net/aj55x/1/

কেন অ্যাডএভেন্টলিস্টনার ব্যবহার করবেন? (এমডিএন থেকে)

অ্যাডইভেন্টলিস্টনার হ'ল ডাব্লু 3 সি ডোমে উল্লিখিত ইভেন্ট শ্রোতার রেজিস্ট্রেশন করার উপায়। এর উপকারিতা নিম্নরূপ:

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

আধুনিক ইভেন্ট নিবন্ধকরণ সম্পর্কে আরও -> http://www.quirksmode.org/js/events_advanced.html

এইচটিএমএল বৈশিষ্ট্য নির্ধারণের মতো অন্যান্য পদ্ধতি , উদাহরণস্বরূপ:

<button onclick="alert('Hello world!')">

বা DOM উপাদান বৈশিষ্ট্য , উদাহরণস্বরূপ:

myEl.onclick = function(event){alert('Hello world');}; 

পুরানো হয় এবং এগুলি সহজে লেখা যায়।

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

DOM উপাদান বৈশিষ্ট্য পদ্ধতির সমস্যাটি হ'ল কেবলমাত্র একটি ইভেন্ট হ্যান্ডলার ইভেন্ট প্রতি উপাদানটির সাথে আবদ্ধ হতে পারে।

Ditionতিহ্যবাহী ইভেন্ট হ্যান্ডলিং সম্পর্কে আরও -> http://www.quirksmode.org/js/events_tradmod.html

এমডিএন উল্লেখ: https://developer.mozilla.org/en-US/docs/DOM/event

Comments

যাক আপনি $('#myDiv').click(function(){প্রথমে কোডটি চালাবেন , তারপরে আপনি জাভাস্ক্রিপ্ট থেকে গতিশীলভাবে 20 টি সারি এইচটিএমএল তৈরি করেন এবং প্রতিটি সারিতে একটি বোতাম থাকে যা জাভাস্ক্রিপ্ট ক্লিক করার সময় একই ফাংশনটি সম্পাদন করার প্রয়োজন হয়। আপনি যদি এটি প্রথমে করেন তবে HTML টি উত্পন্ন হওয়ার আগে ইভেন্ট হ্যান্ডলার যুক্ত হওয়ার কারণে এটি কাজ করবে না। এটি কেবল onclick="functionName()"গতিশীল উত্পাদিত এইচটিএমএলটিতে ফেলে দেওয়া সহজ মনে হয় তারপরে বোতামটি সরাসরি কাজ করে। অথবা আপনি এই পরিস্থিতির জন্য আরও মার্জিত সমাধান জানেন?

— zuallauz

এই ক্ষেত্রে জিজুয়ারির জন্য জাজুলাউজ .delegate()ফাংশন সরবরাহ করে। এটি ভবিষ্যতে সাইটে প্রদর্শিত যে কোনও উপাদানগুলির সাথে ইভেন্টটি সংযুক্ত করবে।

— জেফিরিন

@ সিমোনরব অবহ্রাসিত .liveহয়েছে। .delegateপুরানো সংস্করণগুলির জন্য ব্যবহার করুন বা .onনতুন jQuery সংস্করণগুলির জন্য ব্যবহার করুন ।

— সেলভাকুমার আরুমুগাম

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

— সুপার্টনস্কি

আমি @ সুপার্টনস্কির সাথে একমত আমি দৃ disag়ভাবে একমত নই যে $ ('# মাইডিভ') ক্লিক করুন (ফাংশন () better আরও ভাল। একটি বৃহত জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনটিতে একটি ইভেন্টের সাথে আবদ্ধ হওয়া সমস্ত লক্ষ্য খুঁজে পাওয়া আবশ্যক রেফারেন্সগুলি খুঁজে পাওয়া ব্যাপকভাবে কঠিন হয়ে পড়ে it এটি কি কোনও শ্রেণীর বাধ্যবাধকতা? ?, একটি আইডি, একটি HTML ট্যাগ একটি শিশু রেফারেন্স এবং সেখানে কি ঘটছে CSS পরিবর্তন এবং বর্গ নাম যা আপনি পরিবর্তন করতে আমার অভিজ্ঞতা অন্যদের কোড এটা খুব দ্রুত খুব কুৎসিত হয়ে সঙ্গে কাজ করতে প্রয়োজন আবদ্ধ তাহলে কি হবে?।

— জন

Answer 2

আরও ভাল পারফরম্যান্সের জন্য, নেটিভ জাভাস্ক্রিপ্ট ব্যবহার করুন। দ্রুত বিকাশের জন্য, jQuery ব্যবহার করুন। JQuery বনাম নেটিভ এলিমেন্ট পারফরম্যান্সে পারফরম্যান্সের তুলনাটি পরীক্ষা করুন ।

আমি ফায়ারফক্স 16.0 32-বিট উইন্ডোজ সার্ভার 2008 আর 2/7 64-বিটে একটি পরীক্ষা করেছি

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

ক্লিক ইভেন্টগুলির জন্য, নেটিভ ব্রাউজার ইভেন্ট বনাম jquery ট্রিগার বা jQuery বনাম নেটিভ ক্লিক ইভেন্ট বন্ডিং পরীক্ষা করুন ।

উইন্ডোজ সার্ভার ২০০৮ R2 / 7 64-বিটে 32-বিট ক্রোমে 22.0.1229.79 এ পরীক্ষা করা হচ্ছে

$('#jquery a').click(window.testClickListener); // 2,957 operations/second

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
    el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second

Comments

jQuery অনেকগুলি বিভিন্ন পরিবেশে চালিত হওয়া উচিত যা এটি আরও রোবট করে এবং এটি লিখতে, রক্ষণাবেক্ষণ করা সহজ তবে যদি গতি সবচেয়ে গুরুত্বপূর্ণ হয় তবে jQuery এর উত্তর নয়

— Coops

প্রতিটি কারণে ব্যবহার করার সময় সমস্ত ব্রাউজার সামঞ্জস্যপূর্ণ না হওয়ার বিষয়ে সতর্কতা অবলম্বন করুন, আমি উদাহরণস্বরূপ আইইয়ের জন্য ভাবি না। সম্ভবত একটি পলিফিল দরকারী হবে।

— খালেদ_ভেদেবদেব

Answer 3

আমি যা বুঝতে পারি তা থেকে, আপনার প্রশ্নটি jQuery ব্যবহার করবেন কিনা তা নিয়ে আসলেই নয়। এটি বরং: এইচটিএমএল বা ইভেন্ট শ্রোতার মাধ্যমে ইভেন্টগুলিকে ইনলাইন বেঁধে রাখাই ভাল?

ইনলাইন বাইন্ডিং হ্রাস করা হয়। তদুপরি এইভাবে আপনি কেবলমাত্র একটি নির্দিষ্ট ইভেন্টের সাথে একটি ফাংশন বাঁধতে পারেন।

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

querySelector('#myDiv').addEventListener('click', function () {
    // Some code...
});

এটি বেশিরভাগ আধুনিক ব্রাউজারে কাজ করে।

তবে আপনি যদি ইতিমধ্যে আপনার প্রকল্পে jQuery অন্তর্ভুক্ত করেন - কেবল jQuery: .onবা .clickফাংশন ব্যবহার করুন ।

Comments

<ডি অ্যানক্লিক = "হ্যান্ডলার 1 (); হ্যান্ডলার 2 (); হ্যান্ডলার 3 ();"> </ ডিভি>

— কিরা

এইভাবে আপনি এখনও কেবল একটি "এক্সপ্রেশন" নিবন্ধিত করছেন। উদাহরণস্বরূপ, যদি handler1কোনও ত্রুটি নিক্ষেপ করে handler2এবং handler3কখনও কল হয় না। তদুপরি, আপনি শ্রোতার কাছ থেকে নির্দিষ্ট fuctions গতিশীল যোগ করতে এবং অপসারণ করতে অক্ষম। এবং সর্বশেষে তবে সর্বনিম্ন নয় handler1, handler2এবং handler3গ্লোবাল স্কোপে ঘোষণা করতে হবে যা একটি গন্ধ।

— মাইচা মিস্জিজিজিন

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

— মাইচা মিস্জিজাইসিন

আমি উল্লেখ করেছি যে আমি অক্ষম জাভাস্ক্রিপ্ট সম্পর্কে নিশ্চিত নই। আমি অন্যকে ভুল তথ্য দিচ্ছি বা প্রতারিত করছি না

— কিরা

সেক্ষেত্রে আপনি নিম্নলিখিত <div onclick = "ফাংশন () {চেষ্টা {হ্যান্ডলার 1 (); হ্যান্ডলার 2 (); হ্যান্ডলার 3 ();} ক্যাচ {}}"> </ div>

— কিরা

Answer 4

আপনি এগুলিকে একত্রিত করতে পারেন, ক্লিকটিতে ফাংশনটি আবদ্ধ করতে jQuery ব্যবহার করুন

<div id="myDiv">Some Content</div>

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

Answer 5

$('#myDiv').clickআরও ভাল, কারণ এটি জাভাস্ক্রিপ্ট কোডটি এইচটিএমএল থেকে পৃথক করে । পৃষ্ঠার আচরণ এবং কাঠামোকে আলাদা রাখতে একটিকে অবশ্যই চেষ্টা করতে হবে । এটি অনেক সাহায্য করে।

Comments

বেশিরভাগ ক্ষেত্রেই জেএস স্টাফগুলি ডিজাইন করে লেখার লোকেরা এই উত্তরটি বোঝায়। এবং এটি পোস্ট করা প্রায় 4 বছর পরে এটি upvote অবাক লাগছে !!

— শেখা

Answer 6

এটি আপনাকে আদর্শ এবং কার্য সম্পাদন উভয়ই দেবে বলে এর জন্য যান for

 $('#myDiv').click(function(){
      //Some code
 });

দ্বিতীয় পদ্ধতিটি সহজ জাভাস্ক্রিপ্ট কোড এবং jQuery এর চেয়ে দ্রুত। তবে এখানে পারফরম্যান্স প্রায় একই হবে।

Answer 7

আইএমএইচও, অন্লিক হ'ল পছন্দের পদ্ধতিটি। নীচের শর্তগুলি পূরণ করার সময়ই ক্লিক করুন:

• পৃষ্ঠায় অনেক উপাদান আছে
• ক্লিক ইভেন্টের জন্য নিবন্ধিত হওয়া মাত্র একটি ইভেন্ট
• আপনি মোবাইলের পারফরম্যান্স / ব্যাটারির জীবন সম্পর্কে উদ্বিগ্ন

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

Answer 8

কাজের মধ্যে পার্থক্য। আপনি যদি ক্লিক () ব্যবহার করেন তবে আপনি বেশ কয়েকটি ফাংশন যুক্ত করতে পারেন, তবে আপনি যদি কোনও বৈশিষ্ট্য ব্যবহার করেন তবে কেবলমাত্র একটি ফাংশন কার্যকর করা হবে - শেষটি।

ডেমো

এইচটিএমএল

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

জাভাস্ক্রিপ্ট

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )

যদি আমরা পারফরম্যান্সের বিষয়ে কথা বলি, যে কোনও ক্ষেত্রে সরাসরি ব্যবহার করা সবসময় দ্রুত হয় তবে কোনও বৈশিষ্ট্য ব্যবহার করে আপনি কেবল একটি ফাংশন নির্ধারণ করতে সক্ষম হবেন।

Comments

। আমরা $ ( '# JQueryAttrClick') মত অ্যাট্রিবিউট ব্যবহার করে আপনি একটি ফাংশন চেয়ে বেশি নির্বাহ করতে পারেন ATTR ( 'onClick', 'সতর্কতা (' 2 '); সতর্কতা (' 3 '); সতর্কতা (' 4 ') ")

— Kira

Answer 9

উদ্বেগের বিভাজন এখানে মূল এবং তাই ইভেন্টের বাইন্ডিংটি সাধারণত গৃহীত পদ্ধতি। এটি মূলত বিদ্যমান প্রচুর উত্তরগুলি বলেছে।

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

একটি বোধগম্যতা থাকা দরকার যে <div id="myDiv" onClick="divFunction()">Some Content</div>পুরোটি এতটাই লজ্জা পেয়েছিল কারণ এটি কিছু বিকাশকারী দ্বারা অপব্যবহার করেছেন। সুতরাং এটি বিস্মৃত অনুপাতের পর্যায়ে পৌঁছেছিল, অনেকটা পছন্দ tables। কিছু ডেভেলপারদের আসলে এড়াতে tablesট্যাবুলার ডেটার জন্য। এটি লোকেরা না বুঝে অভিনয় করার নিখুঁত উদাহরণ।

যদিও আমার আচরণটি আমার দৃষ্টিভঙ্গি থেকে আলাদা রাখার ধারণাটি আমি পছন্দ করি। মার্কআপ এটি কী করে তা ঘোষণা করে কোনও সমস্যা দেখছি না ( এটি কীভাবে এটি করে না এটি আচরণ not এটি অনেকটা বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট উপাদানগুলির মতো একটি আসল অনক্লিক অ্যাট্রিবিউট বা কাস্টম অ্যাট্রিবিউটের আকারে থাকতে পারে।

এইভাবে, কেবল মার্কআপে এক নজরে রেখে, আপনি জাভাস্ক্রিপ্ট ইভেন্ট বাইন্ডার লুকআপের বিপরীতে চেষ্টা করার পরিবর্তে কী করছে তা দেখতে পাবেন।

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

বুটস্ট্র্যাপ উদাহরণ:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

সূত্র: http://getbootstrap.com/ javascript /# popovers

দ্রষ্টব্য দ্বিতীয় উদাহরণটির প্রধান অসুবিধা হ'ল বিশ্বব্যাপী নেমস্পেসের দূষণ। উপরের তৃতীয় বিকল্পটি ব্যবহার করে, বা অ্যাংুলারের মতো ফ্রেমওয়ার্ক এবং স্বয়ংক্রিয়ভাবে সুযোগের সাথে এনজি-ক্লিক বৈশিষ্ট্যগুলির মাধ্যমে এটি পরিলক্ষিত হতে পারে।

Answer 10

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

এটি লক্ষণীয় যে তারা বিভিন্ন জিনিস করে: .clickযে কোনও jQuery সংগ্রহের সাথে আবদ্ধ হতে পারে যেখানে onclickআপনি যে উপাদানগুলির সাথে আবদ্ধ হতে চান সেগুলির জন্য ইনলাইন ব্যবহার করতে হবে। আপনি কেবলমাত্র একটি ইভেন্ট ব্যবহার করে বাঁধতে পারেন onclick, যেখানে .clickআপনাকে ইভেন্টগুলিকে আবদ্ধ করতে দেয়।

আমার মতে, আমি এটি সম্পর্কে সামঞ্জস্যপূর্ণ থাকব এবং কেবল যে কোনও .clickজায়গায় ব্যবহার করব এবং আমার সমস্ত জাভাস্ক্রিপ্ট কোড একসাথে রেখে HTML থেকে পৃথক করব।

ব্যবহার করবেন না onclick। আপনি কী করছেন তা যদি না জানেন এবং সম্ভবত আপনি তা না করেন তবে এটি ব্যবহার করার কোনও কারণ নেই।

Comments

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

— জয়

@ জয়রাজ আমি কখনই আমার উত্তরে বলেছিলাম যে এটি একটি ভাল ধারণা?

— বিস্ফোরণ বড়ি

("কেউই উন্নত নয় ") এর .clickচেয়ে ভাল ছিল না বলে এটি বোঝানো হয়েছিল যে এটি প্রায়, বা ঠিক কোডটি লেখার পক্ষে একটি ভাল উপায়, যখন বাস্তবে এক মাইল দূরে ভাল অনুশীলন। দুঃখিত, তবে আইএমএইচও আপনার উত্তরটি নতুন করে লিখুনonclickonclick.click

— জয়

@ এক্সপ্লোশনপিলস আমি উত্তরের অংশটি সরিয়ে ফেলব যা বলবে যে এর চেয়ে ভাল নয়। শেষে অনুচ্ছেদটি একটি দ্বন্দ্বের মতো শোনাচ্ছে।

— হুয়ান মেন্ডেস

Answer 11

<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

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

আপনার উদ্বেগের আলাদা হওয়া উচিত তা উল্লেখ করার দরকার নেই : জাভাস্ক্রিপ্ট এবং লেআউটগুলি পৃথক করা উচিত!

এই ইভেন্টগুলির যে কোনওটির জন্য এমনকি হ্যান্ডলারের তৈরি করা সর্বদা ভাল, একটি ইভেন্ট প্রতিটি জন্য হাজার হাজার পৃথক স্ক্রিপ্ট ব্লক তৈরির পরিবর্তে কয়েক হাজার / হাজার হাজার আইটেম ক্যাপচার করতে পারে!

(এছাড়াও, বাকি সবাই যা বলছে।)

Answer 12

ঠিক আছে, jQuery এর পেছনের অন্যতম প্রধান ধারণা হ'ল জাভাস্ক্রিপ্টকে দুষ্টু এইচটিএমএল কোড থেকে আলাদা করা । প্রথম পদ্ধতিটি হ'ল উপায়।

Answer 13

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

Answer 14

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

ব্যক্তিগতভাবে আপনি যেহেতু jQuery ব্যবহার করছেন তাই আমি এটির সাথে লেগে থাকব কারণ এটি ধারাবাহিক এবং স্ক্রিপ্ট থেকে মার্কআপ ডিকুবল করে না।

Comments

JQuery উদাহরণটি কার্যত document.querySelector('#something').addEventListener(...প্লেইন জাভাস্ক্রিপ্টের মতো বা একই রকম, তাই এটি বিন্দু নয়। একইভাবে আপনি জাভাস্ক্রিপ্টে চাইল্ড নোডগুলি থেকে বুবলিং ইভেন্টগুলি ধরতে পারেন, কেবল jQuery শর্টকাট দিয়ে নয়। বিষয়টির কেন্দ্রবিন্দু হ'ল এই ইভেন্টগুলি নিয়ন্ত্রণের (জাভাস্ক্রিপ্ট আচরণ সংজ্ঞা ফাইল) থাকা উচিত ( ভিউ-র পরিবর্তে এখানে এবং সেখানে ছড়িয়ে ছিটিয়ে থাকা, গ্লোবাল-ভেরিয়েবল-ফাংশনগুলির প্রয়োজন বা আরও খারাপ, ইনলাইন কোড প্রয়োজন))

— নোবগস

Answer 15

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

দ্বিতীয় পদ্ধতিতে ইনলাইন বৈশিষ্ট্যগুলি ব্যবহার করে প্রচুর বৈশ্বিক ফাংশন প্রয়োজন (যা নামস্থান দূষণের দিকে নিয়ে যায়) এবং আচরণের (জাভাস্ক্রিপ্ট) সাথে সামগ্রী / কাঠামো (এইচটিএমএল) মিশ্রিত করে। যে ব্যবহার করবেন না।

পারফরম্যান্স বা মান সম্পর্কে আপনার প্রশ্নের উত্তর সহজেই দেওয়া যায় না। দুটি পদ্ধতি সম্পূর্ণ ভিন্ন, এবং বিভিন্ন কাজ করে। প্রথমটি শক্তিশালী, দ্বিতীয়টি তুচ্ছ (খারাপ শৈলী হিসাবে বিবেচিত) is

Answer 16

অনক্লিক ফাংশন জ্যাকুয়ারি

$('#selector').click(function(){ //Your Functionality });