如何在 HTML 或 JavaScript 中调用按钮的 onclick 方法的两个方法？

How to call two methods on button's onclick method in HTML or JavaScript?

提问by Nirav

How to call two methods on button's onclick method in HTML or JavaScript ?

如何在 HTML 或 JavaScript 中调用按钮的 onclick 方法的两个方法？

回答by Harry Joy

1. Try this:

   <input type="button" onclick="function1();function2();" value="Call2Functions" />
   

2. Or, call second function at the end of first function:

      function func1(){
        //--- some logic
        func2();
      }
   
      function func2(){
       //--- some logic
      }
   

   ...and call func1() onclick of button:

   <input type="button" onclick="func1();" value="Call2Functions" />
   

1. 尝试这个：

   <input type="button" onclick="function1();function2();" value="Call2Functions" />
   

2. 或者，在第一个函数的末尾调用第二个函数：

      function func1(){
        //--- some logic
        func2();
      }
   
      function func2(){
       //--- some logic
      }
   

   ...并在单击按钮时调用 func1()：

   <input type="button" onclick="func1();" value="Call2Functions" />
   

回答by JAAulde

As stated by Harry Joy, you can do it on the onclickattr like so:

正如 Harry Joy 所说，你可以在onclickattr 上这样做：

<input type="button" onclick="func1();func2();" value="Call2Functions" />

Or, in your JS like so:

或者，在你的 JS 中，像这样：

document.getElementById( 'Call2Functions' ).onclick = function()
{
    func1();
    func2();
};

Or, if you are assigning an onclick programmatically, and aren't sure if a previous onclick existed (and don't want to overwrite it):

或者，如果您以编程方式分配 onclick，并且不确定之前的 onclick 是否存在（并且不想覆盖它）：

var Call2FunctionsEle = document.getElementById( 'Call2Functions' ),
    func1 = Call2FunctionsEle.onclick;

Call2FunctionsEle.onclick = function()
{
    if( typeof func1 === 'function' )
    {
        func1();
    }
    func2();
};

If you need the functions run in scope of the element which was clicked, a simple use of apply could be made:

如果您需要在单击的元素范围内运行函数，可以简单地使用 apply：

document.getElementById( 'Call2Functions' ).onclick = function()
{
    func1.apply( this, arguments );
    func2.apply( this, arguments );
};

回答by Nathan Ridley

The modern event handling method:

现代事件处理方法：

element.addEventListener('click', startDragDrop, false);
element.addEventListener('click', spyOnUser, false);

The first argument is the event, the second is the function and the third specifies whether to allow event bubbling.

第一个参数是事件，第二个参数是函数，第三个参数指定是否允许事件冒泡。

From QuirksMode:

从QuirksMode：

W3C's DOM Level 2 Event specification pays careful attention to the problems of the traditional model. It offers a simple way to register as many event handlers as you like for the same event on one element.

The key to the W3C event registration model is the method addEventListener(). You give it three arguments: the event type, the function to be executed and a boolean (true or false) that I'll explain later on. To register our well known doSomething() function to the onclick of an element you do:

W3C 的 DOM Level 2 Event 规范非常关注传统模型的问题。它提供了一种简单的方法，可以为一个元素上的同一事件注册任意数量的事件处理程序。

W3C 事件注册模型的关键是方法addEventListener()。你给它三个参数：事件类型、要执行的函数和一个布尔值（真或假），我稍后会解释。要将我们众所周知的 doSomething() 函数注册到您执行的元素的 onclick 中：

Full details here: http://www.quirksmode.org/js/events_advanced.html

详情请见：http: //www.quirksmode.org/js/events_advanced.html

Using jQuery

使用 jQuery

if you're using jQuery, there is a nice API for event handling:

如果您使用 jQuery，则有一个很好的 API 用于事件处理：

$('#myElement').bind('click', function() { doStuff(); });
$('#myElement').bind('click', function() { doMoreStuff(); });
$('#myElement').bind('click', doEvenMoreStuff);

Full details here: http://api.jquery.com/category/events/

此处的完整详细信息：http: //api.jquery.com/category/events/

回答by Arrabi

<input type="button" onclick="functionA();functionB();" />

function functionA()
{

}

function functionB()
{

}

回答by Vishal Patel

Hi,

你好，

You can also do as like below... In this way, your both functions should call and if both functions return true then it will return true else return false.

你也可以像下面那样做......这样，你的两个函数都应该调用，如果两个函数都返回true，那么它将返回true，否则返回false。

<input type="button" 
     onclick="var valFunc1 = func1(); var valFunc2 = func2(); if(valFunc1 == true && valFunc2 ==true) {return true;} else{return false;}" 
     value="Call2Functions" />

Thank you, Vishal Patel

谢谢你，维沙尔帕特尔