ইনলাইন জাভাস্ক্রিপ্ট (এইচটিএমএল) কীভাবে কাজ করে?

Question

আমি জানি এটি খারাপ অভ্যাস। যদি সম্ভব হয় তবে এই জাতীয় কোডটি লিখবেন না।

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

আমি যখন এই জাতীয় কিছু লেখা হয় তখন কী ঘটে (এবং সম্ভাব্য সমস্যাগুলি) পুরোপুরি বোঝার স্বার্থে এই প্রশ্নটি অনুসরণ করছি:

<a href="#" onclick="alert('Hi')">Click Me</a>

যতদূর আমি এটি বলতে পারি এটি কার্যত একই

<script type="text/javascript">
   $(function(){ // I use jQuery in this example
       document.getElementById('click_me').onclick = 
           function () { alert('Hi'); };
   });
</script>
<a href="#" id="click_me">Click Me</a>

এটি থেকে এক্সট্রোপোলেটিং দেখে মনে হচ্ছে অ্যাট্রিবিউটকে দেওয়া স্ট্রিংটি onclickএকটি বেনামি ফাংশনের মধ্যে isোকানো হয়েছে যা উপাদানটির ক্লিক হ্যান্ডলারের জন্য বরাদ্দ করা হয়েছে। আসলে কি এই ঘটনা?

কারণ আমি এই জাতীয় জিনিসগুলি শুরু করছি:

<a href="#" onclick="$(this).next().fadeIn(); return false;">Display my next sibling</a> <!-- Return false in handler so as not to scroll to top of page! --> 

যা কাজ করে। তবে আমি জানি না এটি কতটা হ্যাক। এটি সন্দেহজনক বলে মনে হচ্ছে কারণ এমন কোনও দৃশ্যমান ফাংশন নেই যা থেকে ফিরে আসছে!

আপনি জিজ্ঞাসা করতে পারেন, স্টিভ কেন আপনি এটি করছেন? ইনলাইন জেএস খারাপ অভ্যাস!

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

Comments

আপনি সঠিক, এটি একটি বেনামে ফাংশন।

— ভামলিন

#click_meআপনার ডমড্রিড ইভেন্টে কোয়েরিটি হুক করতে হবে , বা নোডের পরে স্ক্রিপ্টটি রাখতে হবে।

— বার্গি

একটি কনসোলে, করুন document.getElementById("click_me").onclick;। বা এটি সতর্কতা। আপনি দেখতে পাবেন যে এটি কোনও ফাংশনে রয়েছে।

— ডি স্ট্রাউট

Answer 1

আপনি এটি প্রায় সঠিক পেয়েছেন, তবে আপনি thisইনলাইন কোডে সরবরাহ করা মানটির জন্য কোনও হিসাব করেননি ।

<a href="#" onclick="alert(this)">Click Me</a>

আসলে কাছাকাছি:

<a href="#" id="click_me">Click Me</a>
<script type="text/javascript">
document.getElementById('click_me').addEventListener("click", function(event) {
    (function(event) {
        alert(this);
    }).call(document.getElementById('click_me'), event);
});
</script>

ইনলাইন ইভেন্ট হ্যান্ডলাররা ইভেন্টের thisটার্গেটের সমান সেট করে। আপনি ইনলাইন স্ক্রিপ্টে বেনামে ফাংশনটিও ব্যবহার করতে পারেন

<a href="#" onclick="(function(){alert(this);})()">Click Me</a>

Comments

স্ক্রিপ্টটি অবশ্যই ট্যাগের পরে আসতে হবে, অন্যথায় ট্যাগটি কার্যকর করা হলে তার অস্তিত্ব নেই - আমি এটি প্রতিফলিত করতে আপনার উত্তর পরিবর্তন করার পরামর্শ দিচ্ছি।

— undefined

আমি কীভাবে eventএকটি ইনলাইন দিয়ে প্রচার করি onclick='myFunction(event)'??

— ওল্ডবয়

Answer 2

আপনি যখন পেয়েছেন তখন ব্রাউজারটি কী করে

<a onclick="alert('Hi');" ... >

"অনক্লিক" এর আসল মানটি কার্যকরভাবে এমন কিছুতে সেট করা হয়:

new Function("event", "alert('Hi');");

এটি, এটি একটি ফাংশন তৈরি করে যা একটি "ইভেন্ট" পরামিতিটি প্রত্যাশা করে। (ওয়েল, আইআই করেন না; এটি আরও সাধারণ সরল বেনামে ফাংশনের মতো))

Comments

আহ। সুতরাং আমি আমার ইনলাইন জেএস স্নিপেট eventথেকে ইভেন্টটি (এবং এটির মাধ্যমে উত্স উপাদানটি event.target) পুনরুদ্ধার করতে আসলে পরিবর্তনশীলটি ব্যবহার করতে পারি ! কুল।

— স্টিভেন লু

IE সত্যিই eventপ্যারামিটারটি পাস করে না , তবে আপনি যদি eventএই বেনামে ফাংশনটি ব্যবহার করেন তবে IE এটি আসল ইভেন্ট অবজেক্ট হিসাবে বুঝতে পারবে। যেহেতু বেনামে ফাংশন windowআইই-তে বস্তুর সম্পত্তি হিসাবে সেট করা আছে, এটি এটি দেখতে পাবে window.event।

— rdleal

Answer 3

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

https://www.w3.org/TR/html5/webappapis.html#event-handler-idl-attributes

Comments

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

— স্টিভেন লু

এবং এটির বিরুদ্ধে একটি যথাযথ বৈধ যুক্তি, যার সাথে আমি সম্মত। আমি সাধারণত নিজেরাই ইনলাইন স্ক্রিপ্টিং বা স্টাইলিং যোগ করি না। তবে মানুষের আলাদা স্বাদ থাকে। উদাহরণস্বরূপ, অনেকে বডি বিভাগে স্ক্রিপ্ট এবং স্টাইল ট্যাগ যুক্ত করতে চান, আমি এটি দাঁড়াতে পারি না। তবে এটি বৈধ এবং কিছু লোক এটি পছন্দ করে। bad practice/spaghettificationকিছু জন্য seams কি পছন্দ , good practice/structureঅন্যদের জন্য।

— ড্যানিয়েল বি

আমি github.com/styled-components/styled- কম্পোনেন্টগুলি দেখছি এবং আপনি যদি এটিকে প্রতিক্রিয়াটির সাথে একত্রিত করেন, উদাহরণস্বরূপ, আমরা এখন আপনার অ্যাপ্লিকেশনটির একটি উপাদানটির সাথে যুক্ত সমস্ত কিছুই প্রকৃতপক্ষে এক জায়গায় বাস করছি (আশা করি শান্তিপূর্ণভাবে) এক জায়গায়। এবং এটি আসলে ভয়ঙ্কর দেখাচ্ছে না। অগ্রগতির মতো মনে হয়। এই আলোতে, ইনলাইন স্টাইল এবং কোডটি এইচটিএমএলে জ্যামিং করা সঠিক উপায় নয় (এখন পর্যন্ত এটি জেএস কোডে এইচটিএমএল এবং শৈলীর জ্যামিং বলে মনে হচ্ছে)।

— স্টিভেন লু

Answer 4

সবচেয়ে ভালো উপায় আপনার প্রশ্নের উত্তর দিতে হয় দেখতে এটা কর্ম।

<a id="test" onclick="alert('test')"> test </a> ​

জেএসে

var test = document.getElementById('test');
console.log( test.onclick ); 

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

function onclick(event) {
   alert('test')
}

আমি ইনলাইন ইভেন্ট হ্যান্ডলারগুলি সম্পর্কে আপনার কয়েকটি পয়েন্টের সাথে একমত। হ্যাঁ এগুলি লিখতে সহজ, তবে একাধিক স্থানে কোড পরিবর্তন করার বিষয়ে আমি আপনার সাথে একমত নই, আপনি যদি নিজের কোডটি ভালভাবে গঠন করেন তবে আপনার এটি করার দরকার হবে না should

Comments

আমি মনে করি এরকম কিছু <button onclick="login()"> test login </button>প্রোটোটাইপিংয়ের জন্য পুরোপুরি ঠিক। আপনি এখনই ব্যবহারকারীর ইন্টারঅ্যাকশন প্রয়োজন এমন কিছু পরীক্ষা করতে চান এবং আপনি কেবল এটি পরে মুছতে চলেছেন। কেন জায়গা জুড়ে অতিরিক্ত কোড লিখবেন?

— Dagg Nabbit

এটি অতিরিক্ত কোড নয়, কেবল একটি অতিরিক্ত বেনাম ফাংশন। এবং এটি পুরো জায়গা জুড়ে নয়, এটি আসলে সমস্ত এক জায়গায়, স্ক্রিপ্ট ট্যাগগুলিতে।

— আজিজ পুঞ্জানী 21

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

— স্টাফগুলি

Answer 5

এটি সন্দেহজনক বলে মনে হচ্ছে কারণ এমন কোনও দৃশ্যমান ফাংশন নেই যা থেকে ফিরে আসছে!

এটি একটি বেনাম ফাংশন যা বস্তুর ক্লিক ইভেন্টের সাথে সংযুক্ত করা হয়েছে।

স্টিভ কেন আপনি এটা করছেন?

পৃথিবীতে আপনি দোই কেন ..... আহা কোন বিষয় নয়, যেমনটি আপনি উল্লেখ করেছেন, এটি সত্যই ব্যাপকভাবে গৃহীত খারাপ অভ্যাস :)

Answer 6

কনসোলে এটি ব্যবহার করে দেখুন:

var div = document.createElement('div');

div.setAttribute('onclick', 'alert(event)');

div.onclick

ক্রোমে, এটি এটি দেখায়:

function onclick(event) {
  alert(event)
}

... এবং অ-মানক nameসম্পত্তির div.onclickহয় "onclick"।

সুতরাং, এটি অনামী কিনা বা না আপনার "বেনামে" এর সংজ্ঞা নির্ভর করে। এমন কোনও কিছুর সাথে তুলনা করুন var foo = new Function()যেখানে foo.nameখালি স্ট্রিং রয়েছে এবং এর foo.toString()মতো কিছু তৈরি হবে

function anonymous() {

}

Comments

এটি পয়েন্টির উত্তরের মন্তব্য হিসাবে শুরু হয়েছিল, তবে সত্যিই কোনও মন্তব্য হিসাবে কাজ করে নি। আমার মনে হয় তাঁর এখানেই সেরা উত্তর।

— Dagg Nabbit