जवाबों:
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>आप एक या एक से अधिक तरीकों से एक ईवेंट को प्राप्त / कॉल कर सकते हैं।
यदि आप onclickhtml में दूसरा प्रायश्चित करते हैं तो भी आप इसे कई बार जोड़ सकते हैं, भले ही इसे अनदेखा कर दिया जाए, और click2 triggeredकभी भी प्रिंट नहीं किया जाता है, आप कार्रवाई में एक जोड़ सकते हैं, mousedownलेकिन यह सिर्फ एक समाधान है।
तो सबसे अच्छा करने के लिए उन्हें कोड के रूप में जोड़ने के लिए है:
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') });लेकिन कल्पना कीजिए कि आप उनमें से एक ही तत्व से जुड़े हैं और उनमें से एक को निकालना चाहते हैं। उस ईवेंट श्रोता से एक भी अनाम फ़ंक्शन को निकालना संभव नहीं है।
इसके बजाय, आप नामित कार्यों का उपयोग कर सकते हैं:
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);यह आपके कोड को पढ़ने और बनाए रखने में बहुत आसान बनाता है। खासकर अगर आपका फंक्शन बड़ा है।
आप सभी फ़ंक्शन को एक में लिख सकते हैं और उन्हें कॉल कर सकते हैं। रामदास जैसे पुस्तकालयों में एक से अधिक फ़ंक्शन लिखने के लिए एक फ़ंक्शन है।
<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>या आप रचना को js फ़ाइल में एक अलग कार्य के रूप में रख सकते हैं और उसे कॉल कर सकते हैं
const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>यह ब्रैड एज़र का विकल्प है - आप निम्नानुसार अल्पविराम का उपयोग कर सकते हैं
onclick="funA(), funB(), ..."हालांकि इस दृष्टिकोण का उपयोग नहीं करना बेहतर है - छोटी परियोजनाओं के लिए आप केवल एक फ़ंक्शन कॉलिंग (अधिक: अद्यतन विनीत जावास्क्रिप्ट ) के मामले में ऑनक्लिक का उपयोग कर सकते हैं ।