将两个或多个函数添加到onclick事件

Question

我创建了一个图像元素并为其添加了属性。 我还通过执行以下操作为onclick事件添加了一个函数：

img.onclick = change;

现在我想添加另一个函数，它有一个参数给我的onclick事件。可以说我想补充一下：

retrieveClass(this.className);

我该怎么做？有点像...

 img.onclick = change, retrieveClass(this.className);

Answer 1

如果您希望由单个事件触发多个事件处理程序，则标准方法是使用addEventListener（doc）。

假设在您的示例中，change是处理函数的名称，retrieveClass(this.className)返回另一个处理函数，您可以这样做：

img.addEventListener('click', change);
img.addEventListener('click', retrieveClass(this.className));

Answer 2

img.onclick = function () { change; retrieveClass(this.className); }

Answer 3

您可以使用引用该功能的bind方法，例如：

img.onclick = retrieveClass.bind(img, img.className);
                                 ^^^
                                 this

相当于：

img.onclick = function(){
   retrieveClass(this.className);
}

Answer 4

这是最简单的......

<img src="..." onclick="command1; command2;">

你应该使用一个函数：

function imgClicked() {
    command1;
    command2;
}

当然，您也可以使用

声明它

img.onclick = function () { command1; command2; }

Answer 5

创建一个包含两个函数调用的包装函数，然后将其绑定到您的onclick。

function wrap() {
    change;
    retrieveClass(img.className);
}

img.onclick = wrap();