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


当前回答

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

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

其他回答

另外,为了便于维护JavaScript,可以使用命名函数。

下面是匿名函数的例子:

var el = document.getElementById('id');

// example using an anonymous function (not recommended):
el.addEventListener('click', function() { alert('hello world'); });
el.addEventListener('click', function() { alert('another event') });

但是,想象一下,您有一对附加到同一个元素上的它们,并且想要删除其中一个。从该事件侦听器中删除单个匿名函数是不可能的。

相反,你可以使用命名函数:

var el = document.getElementById('id');

// create named functions:
function alertFirst() { alert('hello world'); };
function alertSecond() { alert('hello world'); };

// assign functions to the event listeners (recommended):
el.addEventListener('click', alertFirst);
el.addEventListener('click', alertSecond);

// then you could remove either one of the functions using:
el.removeEventListener('click', alertFirst);

这也使您的代码更容易阅读和维护。特别是当函数更大的时候。

功能组件

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

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

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

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

如果只使用JavaScript而不使用jQuery,则需要此代码

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