是否有任何方法使用onclick html属性调用多个JavaScript函数?


当前回答

我会用元素。addEventListener方法将其链接到函数。从该函数可以调用多个函数。

我认为将一个事件绑定到一个函数,然后调用多个函数的好处是,你可以执行一些错误检查,有一些if else语句,这样一些函数只在满足某些条件时才会被调用。

其他回答

当然,只需将多个侦听器绑定到它。

jQuery速成

$(“#id”).bind(“click”, function() { 警报(“事件 1”); }); $(“.foo”).bind(“click”, function() { 警报(“Foo 类”); }); <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <div class=“foo” id=“id”>Click</div>

你可以只通过代码添加多个,即使你在html中有第二个onclick属性,它会被忽略,click2触发永远不会被打印,你可以添加一个鼠标下的动作,但这只是一个变通办法。

所以最好的方法是通过代码添加它们,如:

var element = document.getElementById("multiple_onclicks"); 元素。addEventListener("点击",function(){console.log("点击3触发")},false); 元素。addEventListener("点击",function(){console.log("点击4触发")},false); <button id="multiple_onclicks" onclick='console.log("click1触发");' onclick='console.log("click2触发");' onmousedown='console.log("click mousedown触发");' >点击我</button> .log

您需要小心,因为事件可能会堆积起来,如果您要添加许多事件,您可能会记不清它们运行的顺序。

这是brad的另一种回答,你可以这样用逗号

onclick="funA(), funB(), ..."

但是最好不要使用这种方法-对于小型项目,你可以只在一个函数调用的情况下使用onclick(更多:更新的不显眼的javascript)。

函数funA() { console.log (' A '); } 函数funB(点击元素){ console.log('B: ' + click . innertext); } 函数funC(cilckEvent) { console.log('C: ' + cilckEvent.timeStamp); } div{光标:指针} <div onclick="funA(), funB(this), funC(event)"< / div > >点击我

功能组件

             <Button
                onClick={() => {
                  cancelAppointment();
                  handlerModal();
                }}
             >
                Cancel
             </Button>
onclick="doSomething();doSomethingElse();"

但实际上,最好完全不使用onclick,而是通过Javascript代码将事件处理程序附加到DOM节点。这就是所谓的不显眼的javascript。