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

45

试试这个：

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

或者说，第一个函数的末尾调用第二个函数：

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

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

...并调用FUNC1（）按钮的onclick：

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

来源

2011-05-04 10:57:40

20

正如哈里乔伊说，你可以做到这一点的onclick ATTR像这样：

<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(); 
};

如果您需要在元素的范围内运行的功能，其中，W如点击，一个简单的使用申请的可以由：

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

来源

2011-05-04 11:03:03 JAAulde

10

现代事件处理方法：

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

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

从QuirksMode：

W3C的DOM 2级事件规范还得注意传统模式的问题。它提供了一种简单的方法来为一个元素上的同一事件注册尽可能多的事件处理程序。

W3C事件注册模式的关键是方法addEventListener()。你给它三个参数：事件类型，要执行的函数和布尔（真或假），稍后我会解释它。要注册一个元素的onclick我们熟知的doSomething（）函数，你这样做：

这里充分的细节：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/

来源

2011-05-04 11:03:34

+0

我不能在这个模型记住，是你完全表现出跨浏览器兼容，还是有担心在这方面要考虑的代码？ **编辑：**根据您的编辑，我会补充说，我永远不会记得addEventListener模型及其含义，因为我总是使用jQuery。 – JAAulde 2011-05-04 11:07:07

+1

当然，如果您查看旧版浏览器，有一些注意事项，但如果您使用jQuery来处理它，那么您很安全。 – 2011-05-04 11:09:13

+0

得到了你。看到我的评论编辑。 :) – JAAulde 2011-05-04 11:10:04

2

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

function functionA() 
{ 

} 

function functionB() 
{ 

}

来源

2011-05-04 12:08:18 Arrabi

1

嗨，

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

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

谢谢维沙尔帕特尔

来源

2013-10-21 14:42:18

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

回答

相关问题