Question

我有一个本地页面可以帮助我处理HTML和JavaScript，帮助我完成一些基本的工作。我一直在回顾我的代码并重写它以使用最佳实践，因为它有助于我学习，最近我一直在尝试研究命名空间并通过重写常用页面功能和事件来使用它听众。

window.onload = (function() {
var automationPageWrapper = (function() {
    var self = {}

    self.evntListeners = {
        btnTextChange: function() {
            // Code that changes button text when clicked
            },
        btnColorChange: function(formID) {
            //  Code that iterates through buttons with a certain name
            //  and makes them all the same default color
            }
         }
     self.listeners = {
         btnListeners: function() {
             //  Add all event listeners having to do with buttons here
             }
         }
    return self;
    });
automationPageWrapper.listeners.btnListeners();
});

为什么不附加事件监听器？
有没有更好的方法来格式化/调用它？
这是设置JavaScript代码的专业方法吗？

我通过获取功能并将它们发布到Chrome控制台来测试事件监听器，所以我认为它们有效。

全文，因为有些人喜欢阅读所有内容：

  //  Global namespace for the Page Functions
window.addEventListener("onload", function() {
var automationPageWrapper = (function() {
var self = {};
  //  Namespace for event listeners
    self.evtListeners = {
          //  Function to change the color of a selected button
            btnColorChange: function(formName) {
                var elementsByName = document.getElementsByName(formName);

                for (var i = 0; i < elementsByName.length; i++) {
                        if (elementsByName[i].className == "active") {
                              elementsByName[i].className = "inactive";
                                break;
                            }
                    }

            },


          //  Add the event listeners
        listeners: {

                btnListeners: (function () {
                    document.getElementById('sidebar').addEventListener("click", function(e){
                            self.evtListeners.btnColorChange('sidebuttons');
                            e.target.className = "active";
                        });
                    })()

            }

}

return self;
})();

automationPageWrapper.listeners.btnColorChange();
});

命名空间中的函数不将事件侦听器附加到HTML元素

0 个答案: