如何在onclick事件中調用多個JavaScript函數？

155

有什麼辦法可以使用onclick html屬性來調用多個JavaScript函數嗎？如何在onclick事件中調用多個JavaScript函數？

2010-10-11 Qcom

可能的重複[可以在一個元素中有兩個JavaScript onclick事件嗎？]（http://stackoverflow.com/questions/2881307/can-i-have-two-javascript-onclick-events-in-one-元素） – 2015-06-02 13:38:08

276

onclick="doSomething();doSomethingElse();"

不過說真的，你最好不要使用onclick在所有通過JavaScript代碼附加事件處理程序的DOM節點。這被稱爲unobtrusive javascript。

來源

2010-10-11 23:48:11 brad

感謝參考不引人注目的JS，我以前遇到過這種情況，我不應該因爲懶惰而寫出突兀的JS！ xD – Qcom 2010-10-12 00:19:59

沒有probs ...我也強烈推薦jQuery，它可以真正幫助你實現不顯眼的目標。您可以輕鬆地將事件處理程序附加到DOM元素，並且可以非常輕鬆地完成更多操作。我已經使用了2年，從未回頭。 – brad 2010-10-12 00:52:52

如果有人在onclick中調用動作失敗，整個事情就像一個多米諾骨牌鏈，並且onclick不起作用。 – 2013-01-27 19:21:22

當然，只要綁定多個監聽到它。

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>

來源

2010-10-11 23:47:56

從未提及過jQuery – hunter 2010-10-12 00:01:50

@hunter：我用jQuery進行了簡短切割。我不記得本地事件偵聽器代碼。你也可以做Marko提到的，但最好使用事件監聽器。 – 2010-10-12 00:50:05

可能沒有回答原來的問題，但由於我使用jQuery，它回答了我的問題。 – 2013-01-27 19:22:36

1種功能的鏈接定義

<a href="#" onclick="someFunc()">Click me To fire some functions</a>

射擊多種功能從someFunc()

function someFunc() { 
    showAlert(); 
    validate(); 
    anotherFunction(); 
    YetAnotherFunction(); 
}

來源

2010-10-11 23:48:19 Marko

恕我直言，這是真正的程序員的方法。 – 2012-09-23 13:17:20

@ b1nary.atr0phy nope。程序員的方式是爲用戶沒有javascript時添加href =「」屬性。然後，與JavaScript（所以你知道用戶支持它）你刪除href，並添加事件監聽器的事件。這樣，如果您的代碼的另一個模塊將聽取相同的點擊，它不會被覆蓋或覆蓋您的代碼。請閱讀：https：//developer.mozilla.org/en-US/docs/Web/API/Event – gcb 2014-08-07 22:31:20

如果您將任何參數傳遞給函數，這可能無法正常工作，特別是如果您從服務器端生成這些參數 - 方語言。通過在服務器端語言中附加函數（使用任何參數）而不是在服務器端和客戶端上測試所有可能的迭代，可以更容易地構建/維護代碼。 – Siphon 2014-09-17 14:02:46

我會使用element.addEventListener方法將其鏈接到一個函數。從這個功能你可以調用多個功能。

的優點我在事件綁定到一個單一的功能，然後調用多種功能看到的是，你可以執行一些錯誤檢查，有一些if else語句，這樣一些功能，如果滿足一定的條件只有被調用。

來源

2010-10-11 23:57:10

這是，如果你只使用JavaScript和jQuery的不所需的代碼

var el = document.getElementById("id"); 
el.addEventListener("click", function(){alert("click1 triggered")}, false); 
el.addEventListener("click", function(){alert("click2 triggered")}, false);

來源

2015-12-11 05:49:05 anandharshan

這應該是正確的答案和正確的方法如何做到這一點。 – Fusion 2016-04-14 11:17:52

您可以撰寫所有功能於一體，並呼籲them.Libraries像Ramdajs有一個功能組成多種功能於一體。

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

來源

2017-02-19 05:19:04 user93

，你被ramda迷住了。 – 2017-02-20 03:24:32

只能通過代碼添加多個，即使你有第二onclick屬性附加傷害在它得到的HTML忽略，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>

您需要照顧的事件可以堆積起來的，如果你想補充很多事件你可以減少他們跑的順序。

來源

2018-02-12 19:51:56

如何在onclick事件中調用多個JavaScript函數？

回答

相關問題