Bagaimana cara memanggil beberapa fungsi JavaScript di acara onclick?

Jawaban:

390 
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 .

brad
sumber
1
Terima kasih untuk referensi untuk JS yang tidak mengganggu, saya pernah menemukan ini sebelumnya, dan saya harus menahan diri dari menulis JS yang mengganggu hanya karena saya malas! xD
Qcom
9
no probs ... Saya juga sangat merekomendasikan jQuery yang akan sangat membantu Anda dengan tujuan tidak mencolok Anda. Anda dapat dengan mudah melampirkan penangan acara ke elemen DOM dan melakukan lebih banyak lagi tanpa mengganggu. Saya sudah menggunakannya selama 2 tahun sekarang dan tidak pernah melihat ke belakang.
brad
4
Jika satu aksi yang disebut di onclick gagal, semuanya jatuh seperti rantai domino dan onclick gagal berfungsi.
Fiasco Labs
8
Atribut html ini sebenarnya onclick=""tidak onClick="". Itu kesalahan yang sangat umum.
DrewT
2
@ShubhamChopra apa yang Anda bicarakan jsxtidak htmldan pertanyaan ini belum ditandaijsx
DrewT
75

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();
}
Marko
sumber
5
IMHO, ini adalah pendekatan programmer yang sebenarnya.
b1nary.atr0phy
2
@ b1nary.atr0phy nggak. cara programmer adalah menambahkan atribut href = "" ketika pengguna tidak memiliki javascript. kemudian, dengan javascript (sehingga Anda tahu pengguna mendukungnya) Anda menghapus href, dan menambahkan pendengar acara ke acara tersebut. dengan cara itu, jika modul lain dari kode Anda akan mendengarkan klik yang sama, itu tidak akan ditimpa, atau menimpa kode Anda. baca: developer.mozilla.org/en-US/docs/Web/API/Event
gcb
3
Ini mungkin tidak berfungsi dengan baik jika Anda memiliki argumen yang diteruskan ke fungsi, terutama jika Anda menghasilkan argumen tersebut dari bahasa sisi server. Akan lebih mudah untuk membangun / memelihara kode dengan menambahkan fungsi-fungsi (dengan argumen apa pun) dalam bahasa sisi-server daripada menguji semua iterasi yang mungkin pada server dan klien.
Siphon
Ini sangat indah dan elegan
Tessaracter
38

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);
anandharshan
sumber
7
ini harus menjadi jawaban yang benar dan cara yang benar bagaimana melakukannya.
Fusion
11

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.

Girish Dusane
sumber
9

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>
Luaskan cuplikan

Josh K.
sumber
@ pemburu: Saya memotong pendek dengan jQuery. Saya tidak ingat persis kode pendengar acara asli. Anda juga bisa melakukan apa yang disebut Marko, tetapi lebih baik menggunakan pendengar acara.
Josh K
1
Mungkin tidak menjawab pertanyaan awal, tetapi karena saya menggunakan jQuery, itu menjawab pertanyaan saya.
Fiasco Labs
1
Adakah cara untuk melakukan ini dengan Javascript lama biasa?
CodyBugstein
4

ES6 Bereaksi

<MenuItem
  onClick={() => {
    this.props.toggleTheme();
    this.handleMenuClose();
  }}
>
Hitesh Sahu
sumber
2
@Ini adalah JSX, pertanyaan ini tidak ditandai di bawah jsx
Shubham Chopra
2 

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>
Luaskan cuplikan

Anda dapat mencapai / memanggil satu acara dengan satu metode atau lebih.

Pramod Kharade
sumber
1

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>
Luaskan cuplikan

Anda perlu berhati-hati karena acara dapat menumpuk, dan jika Anda ingin menambahkan banyak acara, Anda dapat kehilangan urutan pesanan yang dijalankan.

Eduard Florinescu
sumber
1

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.

Remi
sumber
Untuk informasi lebih lanjut, "tutorialist" Avelx memiliki video yang bagus yang dapat saya rekomendasikan mengenai subjek ini: youtube.com/watch?v=7UstS0hsHgI
Remi
0

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>
pengguna93
sumber
0

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 ).

Tampilkan cuplikan kode

Kamil Kiełczewski
sumber