Yanıtlar:
onclick="doSomething();doSomethingElse();"Ama gerçekten, hiç kullanmamanız onclickve Javascript kodunuz aracılığıyla olay işleyicisini DOM düğümüne eklemeniz daha iyi olur. Bu göze batmayan javascript olarak bilinir .
onclick=""değildir onClick="". Bu çok yaygın bir hatadır.
jsxdeğil htmlve bu soru ile etiketlenmedijsx
Tanımlanmış 1 fonksiyona sahip bir bağlantı
<a href="#" onclick="someFunc()">Click me To fire some functions</a>Kaynağından birden fazla işlevi etkinleştirme someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}JQuery değil, yalnızca JavaScript kullanıyorsanız gereken kod budur
var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);Bu element.addEventListeneryöntemi bir işleve bağlamak için kullanırdım. Bu işlevden birden fazla işlevi çağırabilirsiniz.
Bir olayı tek bir işleve bağlarken ve sonra birden çok işlevi çağırırken gördüğüm avantaj, bazı hata denetimleri gerçekleştirebilmeniz, bazı if ifadeleri alabilmenizdir, böylece bazı işlevler yalnızca belirli ölçütler karşılandığında çağrılır.
Elbette, birden fazla dinleyiciyi ona bağlayın.
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 Reaksiyonu
<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>Bir etkinliği bir veya daha fazla yöntemle gerçekleştirebilir / çağırabilirsiniz.
onclickHtml'de göz ardı edilen ve click2 triggeredhiçbir zaman yazdırılmayan ikinci özniteliğe sahip olsanız bile, kodla birden fazla ekleyebilirsiniz, eylemde bir tane ekleyebilirsiniz, mousedownancak bu sadece bir çözümdür.
Bu nedenle yapılacak en iyi şey, kodları aşağıdaki gibi eklemektir:
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>Olayların birikebileceği için dikkatli olmalısınız ve birçok olay eklerseniz, çalıştırıldıkları sıralamayı kaybedebilirsiniz.
Korunabilir JavaScript için bir ek, adlandırılmış bir işlev kullanıyor.
Bu anonim işlev örneğidir:
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') });Ancak, aynı öğeye bağlanmış birkaç taneniz olduğunu ve bunlardan birini kaldırmak istediğinizi düşünün. Bu olay dinleyicisinden tek bir anonim işlevi kaldırmak mümkün değildir.
Bunun yerine, adlandırılmış işlevleri kullanabilirsiniz:
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);Bu ayrıca kodunuzun okunmasını ve bakımını çok daha kolay hale getirir. Özellikle fonksiyonunuz daha büyükse.
Tüm işlevleri bir araya getirip çağırabilirsiniz.Ramdajs gibi kütüphanelerin birden fazla işlevi bir araya getirme işlevi vardır.
<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>veya kompozisyonu js dosyasına ayrı bir işlev olarak koyabilir ve çağırabilirsiniz
const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>Bu brad anser'ın alternatifidir - virgülü aşağıdaki gibi kullanabilirsiniz
onclick="funA(), funB(), ..."ancak bu yaklaşımı KULLANMAMAK daha iyidir - küçük projeler için yalnızca tek bir işlev çağrısı durumunda onclick'i kullanabilirsiniz (daha fazlası: göze batmayan javascript güncellenmiştir ).