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

Question

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

Answer 1

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

Answer 2

正如Harry Joy所说,你可以在onclickattr上这样做:

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

或者,在你的JS中如此:

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

或者,如果您以编程方式分配onclick,并且不确定是否存在先前的onclick(并且不想覆盖它):

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

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

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

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

Answer 3

现代事件处理方法:

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

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

来自QuirksMode:

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

W3C事件注册模型的关键是方法addEventListener().你给它三个参数:事件类型,要执行的函数和稍后我将解释的布尔值(true或false).要将我们众所周知的doSomething()函数注册到您执行的元素的onclick:

详细信息请访问:http://www.quirksmode.org/js/events_advanced.html

使用jQuery

如果你正在使用jQuery,那么有一个很好的事件处理API:

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

详细信息请访问:http://api.jquery.com/category/events/