如何将多个 onclick 函数绑定到特定节点？答案

【问题标题】：How do you bind multiple onclick functions to a specific node?如何将多个 onclick 函数绑定到特定节点？
【发布时间】：2014-03-20 10:09:00
【问题描述】：

当在我的页面上单击 HTML 节点时，我希望它发生一些事情。

我还希望它发生其他事情。

然后我决定，我想要更进一步的事情发生在它身上。换句话说，我想继续将它绑定到新的操作。但我不想将其硬编码到原始的 onclick 函数中，而是想创建一个函数来执行此操作。

换句话说，我想要这样的东西：

function addClickBinding(node, functionToPerform){
     node.onclick = function(e){
           //some stuff
           functionToPerform(stuff in here)
     }

我发现的问题是，如果我用同一个节点调用它，之前的 onclick 会被覆盖。

如何继续向同一节点添加新的onclick 属性？

注意：我不想使用 JQuery

【问题讨论】：

标签： javascript binding onclick

【解决方案1】：

您可以使用element.addEventListener('click', function(e) { }, false);。阅读它here。否则，您可以用函数包装您希望调用的函数，并使其等于.onclick。

【讨论】：

【解决方案2】：

如果你只是想让它同时运行多个函数，那么你可以有一个函数来做到这一点：

function clickControl()
{
    doThis();
    doThat();
    etc();
}

假设这不是问题，并且您希望某些事情在某些条件下发生，那么您只需将它们也放在那里：

function clickControl()
{
    if(something)
    {
         doThis();
    }else if(something_else)
    {
        doThat();
    }else
    {
        etc();
    }
}

最后，如果您希望每次都发生不同的事情，请设置一个全局变量：

var clickStep = 1;

function clickControl()
{
    switch(clickStep++)
    {
        case 1:
            doThis();
            break;
        case 2:
            doThat();
            break;
        case 3:
            etc();
            break;
    }
}

我希望我在这里回答了你的问题。我一夜没睡，所以如果我对这件事不感兴趣，那么我道歉。

【讨论】：