Question

我想在页面加载完成后为页面上的所有按钮添加点击事件，我尝试更改＆＃39;点击＆＃39;到＆＃39; onload＆＃39;但这没用，所以我一定做错了。 addClickEvent是一个为按钮添加单独的单击事件的功能，这样它们可以根据您单击的按钮执行不同的操作。那么，我该如何让它正常工作？

编辑：可能不太清楚，但我希望在加载页面时已经应用了addClickEvent，否则它会让我不得不双击按钮以获得所需的效果。

var allButtons = document.getElementsByTagName('button');

for (i = 0; i < allButtons.length; i++) {
    allButtons[i].addEventListener('click', addClickEvent);
}
allButtons[0].removeEventListener('click', addClickEvent); //this removes the click event for the first button

Answer 1

您可以在文档上注册load事件！

    document.addEventListener("load", function(){
      var allButtons = document.getElementsByTagName('button');

      for (i = 0; i < allButtons.length; i++) {
        allButtons[i].addEventListener('click', addClickEvent);
      } 
      allButtons[0].removeEventListener('click', addClickEvent);
});

<强>更新

好的，你可以这样吗

window.addEventListener("load", function(){
    var allButtons = document.getElementsByTagName('button');

    allButtons.addEventListener('click', addClickEvent);
    allButtons[0].removeEventListener('click', addClickEvent); 
});

function addClickEvent(evt){
    switch(evt.toElement.value)){
        "edit":
            //Your code
            break;
        "delete":
           //Your code
           break;
        "complete":
           //Your code
           break;
        default:
          console.log("Error");
          break;
    }
}

Answer 2

您使用点击事件来附加点击事件处理程序，这是创建中间人的原因。直接在window-load内部进行，无需像这样的特殊addClickEvent函数：

document.addEventListener('load', function() {
    // declare all functions in an object, easy to find, develop, and call them
    var funcs = {
            'edit': function() { /* your edit-code here */ },
            'delete': function() { /* your delete-code here */ }, // delete is keyword, that's why quoted
            'complete': function() { /* your complete-code here */ }
        },
        butts = document.getElementsByTagName('button'),
        fnc;
    for (var i = butts.length; i >= 0; i--) { // step backwards needs only one lookup for length
        if (fnc = funcs[butts[i].getAttribute('name')]) { // get function equal to button name
            butts[i].addEventListener('click', fnc); // apply it
        }
    }
    /* more code after document has loaded */
});

如果这不完全符合您的需求，请随意发表批评。

如何在页面加载时为按钮添加单击事件？

2 个答案: