html元素的包装函数中的Javascript事件答案

【问题标题】：Javascript event in a wrapper function for a html elementhtml元素的包装函数中的Javascript事件
【发布时间】：2015-06-22 22:35:33
【问题描述】：

我有以下问题：假设在我的 html 页面中，我有以下元素：

<button onclick="myfunction(id)">Save</button>

在我的 javascript 文件中

(function(){

   function myfunction(id){
     // magic happends
   };

})();

在这种情况下它不起作用，因为 myfunction 被包装在 iife 函数中，所以我的问题是：是否有最佳实践可以将 JavaScript 逻辑保存在包装函数中是时候访问 HTML 元素了？

【问题讨论】：

【解决方案1】：

有没有一种最佳实践，您可以将 JavaScript 逻辑保存在包装函数中，同时让 HTML 元素可以访问？

根据您应用的结构，最好的方法是不使用内联事件处理程序，而是使用 DOM API 来绑定处理程序：

(function(){

   function myfunction(id){
     // magic happends
   };

   button.addEventListener('click', myfunction);
})();

如果这是不可能的，并且您确实需要使用内联事件处理程序，您可以始终将函数设为全局：

(function(){

   window.myfunction = function myfunction(id){
     // magic happends
   };

})();

【讨论】：

添加事件监听器绝对是要走的路；您可以获得更大的灵活性，更好的关注点分离，并且您不必暴露大量的全局变量。您还可以执行删除事件侦听器之类的操作，或有条件地添加它们。