Question

所以我有一个包含许多函数的对象。我希望能够通过单击一个功能来启动一堆这些功能。我已经开始工作，但我认为我没有最好的解决方案。这是我的代码：

HTML

<button onclick="_this.call(_this.func1(), _this.func2())">click me</button>

JS：

var _this = {};

_this.func1 = function() {
  console.log('func1');
};

_this.func2 = function() {
  console.log('func2');
};

_this.call = function() {};

修改

我的主要目标是一次只触发某些函数，所以我可能不得不考虑使用函数中的arguments变量来激活函数。

Answer 1

最干净的方法是保持html与最少的JS（或者更好的没有JS）。

所以这里就是

<button id="myButton" onclick="_this.handleOnClick())">click me</button>

在JS中：

var _this = {};

_this.handleOnClick = function() {
    _this.func1();
    _this.func2();
}

_this.func1 = function() {
  console.log('func1');
};

_this.func2 = function() {
  console.log('func2');
};

_this.call = function() {};

更好

document.getElementById("myButton").addEventListener("click", function(){
    _this.handleOnClick()
});

Answer 2

这个怎么样。

function one() {};
function two() {};
function three() {};

var button.document.getElementsByTagName('button')[0];

button.addEventListener('click', function() {
   one();
   two();
   three();
, false);

Answer 3

您可以这样调用所有对象方法：

var obj = {
    func1: function() { console.log('func1'); },
    func2: function() { console.log('func2'); }
}

Object.keys(obj).forEach(function(key){ obj[key](); }, this);

ES2015版本：

var obj = {
    func1: () => console.log('func1'),
    func2: () => console.log('func2')
}

Object.keys(obj).forEach(key => obj[key]());

obj 必须仅包含方法

在Javascript中通过onclick调用多个函数的最佳方法是什么？

3 个答案: