Jawaban:
onclick="doSomething();doSomethingElse();"Tapi sungguh, Anda lebih baik tidak menggunakan onclicksama sekali dan melampirkan pengendali acara ke simpul DOM melalui kode Javascript Anda. Ini dikenal sebagai javascript yang tidak mencolok .
onclick=""tidak onClick="". Itu kesalahan yang sangat umum.
jsxtidak htmldan pertanyaan ini belum ditandaijsx
Tautan dengan 1 fungsi ditentukan
<a href="#" onclick="someFunc()">Click me To fire some functions</a>Memecat beberapa fungsi dari someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}
Ini adalah kode yang diperlukan jika Anda hanya menggunakan JavaScript dan bukan jQuery
var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);
Saya akan menggunakan element.addEventListenermetode untuk menghubungkannya ke suatu fungsi. Dari fungsi itu Anda dapat memanggil beberapa fungsi.
Keuntungan yang saya lihat dalam mengikat suatu peristiwa ke fungsi tunggal dan kemudian memanggil beberapa fungsi adalah bahwa Anda dapat melakukan beberapa pengecekan kesalahan, memiliki beberapa pernyataan if else sehingga beberapa fungsi hanya dipanggil jika kriteria tertentu dipenuhi.
Tentu, cukup ikat beberapa pendengar.
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 Bereaksi
<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>Anda dapat mencapai / memanggil satu acara dengan satu metode atau lebih.
Anda dapat menambahkan beberapa hanya dengan kode bahkan jika Anda memiliki onclickatribut kedua dalam html itu diabaikan, dan click2 triggeredtidak pernah dicetak, Anda bisa menambahkan satu pada aksi mousedowntetapi itu hanya solusi.
Jadi yang terbaik untuk dilakukan adalah menambahkannya dengan kode seperti pada:
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>Anda perlu berhati-hati karena acara dapat menumpuk, dan jika Anda ingin menambahkan banyak acara, Anda dapat kehilangan urutan pesanan yang dijalankan.
Satu tambahan, untuk JavaScript yang dapat dipelihara adalah menggunakan fungsi bernama.
Ini adalah contoh fungsi anonim:
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') });Tetapi bayangkan Anda memiliki beberapa dari mereka melekat pada elemen yang sama dan ingin menghapus salah satunya. Tidak mungkin untuk menghapus fungsi anonim tunggal dari pendengar acara itu.
Sebagai gantinya, Anda dapat menggunakan fungsi bernama:
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);Ini juga membuat kode Anda jauh lebih mudah dibaca dan dipelihara. Apalagi jika fungsi Anda lebih besar.
Anda dapat menyusun semua fungsi menjadi satu dan memanggilnya. Perpustakaan seperti Ramdajs memiliki fungsi untuk menyusun beberapa fungsi menjadi satu.
<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>atau Anda dapat menempatkan komposisi sebagai fungsi terpisah dalam file js dan menyebutnya
const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>Ini adalah alternatif dari brad anser - Anda dapat menggunakan koma sebagai berikut
onclick="funA(), funB(), ..."namun lebih baik untuk TIDAK menggunakan pendekatan ini - untuk proyek-proyek kecil Anda dapat menggunakan onclick hanya jika ada satu pemanggilan fungsi (lebih lanjut: javascript unobtrusive yang diperbarui ).