Apakah ada cara untuk menggunakan onclick
atribut html untuk memanggil lebih dari satu fungsi JavaScript?
onclick="doSomething();doSomethingElse();"
Tapi benar-benar, kau're lebih baik tidak menggunakan onclick
dan memasang event handler untuk DOM node melalui kode Javascript. Hal ini dikenal sebagai javascript.
Sebuah link dengan 1 fungsi yang didefinisikan
<a href="#" onclick="someFunc()">Click me To fire some functions</a>
Menembakkan beberapa fungsi dari someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}
Ini adalah kode yang diperlukan jika anda're hanya menggunakan JavaScript dan 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 elemen.addEventListener
metode untuk link ke fungsi. Dari fungsi yang anda dapat menghubungi beberapa fungsi.
Keuntungan yang saya lihat dalam mengikat sebuah acara untuk fungsi tunggal dan kemudian memanggil beberapa fungsi adalah bahwa anda dapat melakukan beberapa pengecekan error, memiliki beberapa jika pernyataan lain sehingga beberapa fungsi hanya dipanggil jika kriteria tertentu terpenuhi.
Yakin, hanya mengikat beberapa pendengar untuk itu.
Pendek memotong dengan 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>
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/call peristiwa yang satu dengan satu atau lebih metode.
Satu tambahan, untuk dipelihara JavaScript adalah dengan menggunakan sebuah fungsi bernama.
Ini adalah contoh dari 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') });
Tapi bayangkan anda memiliki beberapa dari mereka melekat pada elemen yang sama dan ingin menghapus salah satu dari mereka. Hal ini tidak mungkin untuk menghapus satu fungsi anonim dari peristiwa itu pendengar.
Sebaliknya, anda dapat menggunakan nama fungsi:
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 lebih mudah untuk membaca dan memelihara. Terutama jika anda fungsi yang lebih besar.
Anda dapat menambahkan beberapa hanya dengan kode bahkan jika anda memiliki kedua onclick
atribut dalam html akan diabaikan, dan click2 dipicu
tidak pernah akan dicetak, anda bisa menambahkan satu pada tindakan mousedown
tapi itu hanya sebuah solusi.
Jadi yang terbaik untuk dilakukan adalah menambahkan mereka dengan kode seperti di:
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 peristiwa yang dapat menumpuk, dan jika anda akan menambahkan banyak peristiwa yang anda dapat kehilangan hitungan agar mereka berlari.
Anda dapat membuat segala fungsi menjadi satu dan memanggil mereka.Perpustakaan, seperti Ramdajs ini 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 terpisah fungsi di js file dan menyebutnya
const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>