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

Javascript event in a wrapper function for a html element

本文关键字：Javascript 事件 包装 元素 html 函数      更新时间：2023-09-26

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

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

在我的javascript文件中

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

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

是否有一种最佳实践可以将JavaScript逻辑保留在包装器函数中，同时对HTML元素进行访问？

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

(function(){
   function myfunction(id){
     // magic happends
   };
   button.addEventListener('click', myfunction);
})();

有关事件处理的详细信息。

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

(function(){
   window.myfunction = function myfunction(id){
     // magic happends
   };
})();
相关文章：