যা ঘটছে তা হ'ল ফর্মটি জমা দেওয়া হচ্ছে, এবং তাই পৃষ্ঠাটি রিফ্রেশ হচ্ছে (তার মূল সামগ্রী সহ) with আপনি clickজমা দেওয়ার বোতামে ইভেন্টটি পরিচালনা করছেন ।
আপনি যদি উপাদানটি সরিয়ে ফর্মটি জমা না করতে চান submitতবে পরিবর্তে ফর্মটিতে ইভেন্টটি পরিচালনা করুন এবং ফিরে আসুনfalse আপনার হ্যান্ডলার থেকে আসুন:
এইচটিএমএল:
<form onsubmit="return removeDummy(); ">
<input type="submit" value="Remove DUMMY"/>
</form>
javascript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
তবে এর জন্য আপনার কোনও ফর্মের প্রয়োজন হয় না (বা চান), না এটির একমাত্র উদ্দেশ্য যদি ডামি ডিভটি সরিয়ে ফেলা হয়। পরিবর্তে:
এইচটিএমএল:
<input type="button" value="Remove DUMMY" onclick="removeDummy()" />
javascript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
তবে ইভেন্ট হ্যান্ডলারগুলি সেটআপ করার সেই স্টাইলটি পুরানো old আপনার জাভাস্ক্রিপ্ট কোডটি তার নিজস্ব ফাইলে এবং এ জাতীয়তে ভাল প্রবণতা আছে বলে মনে হয়। পরবর্তী পদক্ষেপটি এটি আরও গ্রহণ করা এবং onXYZইভেন্ট হ্যান্ডলারদের হুক করার জন্য বৈশিষ্ট্যগুলি ব্যবহার করা এড়ানো। পরিবর্তে, আপনার জাভাস্ক্রিপ্টে, আপনি তার পরিবর্তে এটিকে আরও নতুন (সারকা বছর 2000) এর সাহায্যে আঁকতে পারেন:
এইচটিএমএল:
<input id='btnRemoveDummy' type="button" value="Remove DUMMY"/>
javascript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
function pageInit() {
// Hook up the "remove dummy" button
var btn = document.getElementById('btnRemoveDummy');
if (btn.addEventListener) {
// DOM2 standard
btn.addEventListener('click', removeDummy, false);
}
else if (btn.attachEvent) {
// IE (IE9 finally supports the above, though)
btn.attachEvent('onclick', removeDummy);
}
else {
// Really old or non-standard browser, try DOM0
btn.onclick = removeDummy;
}
}
... তারপরে আপনার পৃষ্ঠার একেবারে শেষের দিকে (ক্লোজিং ট্যাগের ঠিক আগে ) pageInit();কোনও কল থেকে , বা ইভেন্টের মধ্যে থেকেই কল করুন , যদিও পৃষ্ঠা লোড চক্রের মধ্যে এটি খুব দেরিতে ঘটে এবং তাই সাধারণত ঘটনা হুক করার পক্ষে ভাল হয় না হ্যান্ডলারগুলি (এটি পরে ঘটে)scriptbody</body>window load উদাহরণস্বরূপ, সমস্ত চিত্র শেষ পর্যন্ত লোড )।
নোট করুন যে ব্রাউজারের পার্থক্যগুলি মোকাবেলায় আমাকে কিছু পরিচালনা করতে হয়েছিল। আপনি সম্ভবত ইভেন্টগুলি হুক করার জন্য একটি ফাংশন চাইবেন যাতে আপনাকে প্রতিবার সেই যুক্তিটির পুনরাবৃত্তি করতে হবে না। অথবা মত একটি লাইব্রেরি ব্যবহারের বিষয়ে বিবেচনা jQuery এর , প্রোটোটাইপ , Yui , বন্ধ আপনার জন্য ব্রাউজারের পার্থক্যগুলি সাবলীল করতে , বা অন্য যে কোনও । এটি খুব গুরুত্বপূর্ণ হিসাবে করে DOM দীর্ঘ আগে, কাজে ব্যবহৃত জন্য প্রস্তুত যত তাড়াতাড়ি চালানোর জন্য) আগুন। অন্তর্নিহিত কাপড় জাভাস্ক্রিপ্ট মৌলিক এবং DOM মৌলিক নিরিখে চলছে উভয় বুঝতে কিন্তু লাইব্রেরি অসঙ্গতি অনেকটা সাথে মোকাবিলা, এবং এছাড়াও কুশলী ইউটিলিটি অনেক প্রদান - ইভেন্ট হ্যান্ডলার যে আপ hooking একটি উপায় মতো পুলিশ ব্রাউজার পার্থক্য। তাদের বেশিরভাগ একটি ফাংশন সেট আপ করার জন্য একটি উপায়ও সরবরাহ করে (যেমনpageInitwindow load