উত্তর:
onclick="doSomething();doSomethingElse();"তবে সত্যিই, আপনি onclickনিজের জাভাস্ক্রিপ্ট কোডের মাধ্যমে ডেম নোডের সাথে ইভেন্ট হ্যান্ডলারটি সংযুক্ত না করেই ভাল । এটি আপত্তিজনক জাভাস্ক্রিপ্ট হিসাবে পরিচিত ।
onclick=""তা নয় onClick=""। এটি খুব সাধারণ ভুল
jsxনয় htmlএবং এই প্রশ্নটির সাথে ট্যাগ করা হয়নিjsx
1 ফাংশন সংজ্ঞায়িত একটি লিঙ্ক
<a href="#" onclick="someFunc()">Click me To fire some functions</a>থেকে একাধিক ফাংশন চালানো someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}আপনি যদি কেবল জাভাস্ক্রিপ্ট ব্যবহার করেন এবং jQuery ব্যবহার না করেন তবে এই কোডটি প্রয়োজনীয়
var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);আমি element.addEventListenerপদ্ধতিটি এটি কোনও ফাংশনের সাথে লিঙ্ক করতে ব্যবহার করব । সেই ফাংশন থেকে আপনি একাধিক ফাংশন কল করতে পারেন।
একটি ইভেন্টকে একটি ফাংশনে আবদ্ধ করার পরে আমি যে সুবিধাটি দেখছি এবং তারপরে একাধিক ফাংশন কল করে তা হ'ল আপনি কিছু ত্রুটি পরীক্ষা করে পরীক্ষা করতে পারেন, কিছু অন্য বিবৃতি আছে যাতে কিছু ফাংশন কেবলমাত্র নির্দিষ্ট মানদণ্ডগুলি পূরণ করা হলে ডাকা হয়।
অবশ্যই, এটিতে একাধিক শ্রোতাকে কেবল আবদ্ধ করুন।
Short cutting with jQuery
$("#id").bind("click", function() {
alert("Event 1");
});
$(".foo").bind("click", function() {
alert("Foo class");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo" id="id">Click</div>ES6 প্রতিক্রিয়া
<MenuItem
onClick={() => {
this.props.toggleTheme();
this.handleMenuClose();
}}
>var btn = document.querySelector('#twofuns');
btn.addEventListener('click',method1);
btn.addEventListener('click',method2);
function method2(){
console.log("Method 2");
}
function method1(){
console.log("Method 1");
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pramod Kharade-Javascript</title>
</head>
<body>
<button id="twofuns">Click Me!</button>
</body>
</html>আপনি এক বা একাধিক পদ্ধতিতে একটি ইভেন্ট অর্জন / কল করতে পারেন।
আপনি onclickএইচটিএমএল-তে এটি দ্বিতীয়বারের মতো থাকলেও এটি কোড দ্বারা একাধিক যুক্ত করতে পারেন এবং তা click2 triggeredকখনই মুদ্রিত হয় না, আপনি ক্রিয়াকলাপে একটি যুক্ত করতে পারেন তবে mousedownএটি কেবল একটি কাজ ound
তাই করণীয় হ'ল সর্বোত্তমভাবে কোড হিসাবে তাদের যুক্ত করা:
var element = document.getElementById("multiple_onclicks");
element.addEventListener("click", function(){console.log("click3 triggered")}, false);
element.addEventListener("click", function(){console.log("click4 triggered")}, false);<button id="multiple_onclicks" onclick='console.log("click1 triggered");' onclick='console.log("click2 triggered");' onmousedown='console.log("click mousedown triggered");' > Click me</button>ইভেন্টগুলি স্তূপাকার হতে পারে সেজন্য আপনার যত্ন নেওয়া দরকার এবং আপনি যদি অনেক ইভেন্ট যুক্ত করেন তবে সেগুলি ক্রমবিন্যাসের ক্রম গণনা ছাড়তে পারেন।
এক যোগ, রক্ষণাবেক্ষণযোগ্য জাভাস্ক্রিপ্ট জন্য একটি নামকরণ ফাংশন ব্যবহার করা হয়।
এটি বেনামে ফাংশনের উদাহরণ:
var el = document.getElementById('id');
// example using an anonymous function (not recommended):
el.addEventListener('click', function() { alert('hello world'); });
el.addEventListener('click', function() { alert('another event') });তবে কল্পনা করুন যে তাদের মধ্যে বেশ কয়েকটি একই উপাদানের সাথে সংযুক্ত রয়েছে এবং সেগুলির একটি অপসারণ করতে চান। Event ইভেন্ট শ্রোতার কাছ থেকে কোনও একক বেনামি ফাংশন সরিয়ে ফেলা সম্ভব নয়।
পরিবর্তে, আপনি নামযুক্ত ফাংশন ব্যবহার করতে পারেন:
var el = document.getElementById('id');
// create named functions:
function alertFirst() { alert('hello world'); };
function alertSecond() { alert('hello world'); };
// assign functions to the event listeners (recommended):
el.addEventListener('click', alertFirst);
el.addEventListener('click', alertSecond);
// then you could remove either one of the functions using:
el.removeEventListener('click', alertFirst);এটি আপনার কোডটি পড়া এবং বজায় রাখা আরও অনেক সহজ রাখে। বিশেষত যদি আপনার ফাংশন বড় হয়।
আপনি সমস্ত ফাংশনকে একটিতে রচনা করতে এবং সেগুলিতে কল করতে পারেন Ram রামদাজের মতো লাইব্রেরিতে একাধিক ফাংশন রচনা করার জন্য একটি ফাংশন রয়েছে।
<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>অথবা আপনি জেএস ফাইলে একটি পৃথক ফাংশন হিসাবে রচনাটি রাখতে পারেন এবং এটিকে কল করতে পারেন
const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>এটি ব্র্যাড আনসার বিকল্প - আপনি নিম্নলিখিত হিসাবে কমা ব্যবহার করতে পারেন
onclick="funA(), funB(), ..."তবে এই পদ্ধতির ব্যবহার না করাই ভাল - ছোট প্রকল্পগুলির জন্য আপনি কেবলমাত্র একটি ফাংশন কলিংয়ের ক্ষেত্রে অনক্লিক ব্যবহার করতে পারেন (আরও: আপডেট বিবাদী জাভাস্ক্রিপ্ট )।