程序员经验分享-hwhale

addEventListener 匿名函数中的 Javascript 变量范围

2023-12-20

单击每个 div 时，如果单击了 div 1，则应发出警报“1”；如果单击了 div 2，则应发出警报“5”。我试图使此代码尽可能简单，因为这是在更大的应用程序中需要的。

<html>
<head>
<style type="text/css">
#div1 { background-color: #00ff00; margin: 10px; padding: 10px; }
#div2 { background-color: #0000ff; margin: 10px; padding: 10px; }
</style>
<script type="text/javascript">

function init()
{
  var total = 1;

  var div1 = document.getElementById('div1'),
      div2 = document.getElementById('div2');

  var helper = function(event, id)
  {
      if (event.stopPropagation) event.stopPropagation();
      if (event.preventDefault) event.preventDefault();

      alert('id='+id);
  }

  div1.addEventListener('click', function(event) { helper(event, total); }, false);

  total += 4;

  div2.addEventListener('click', function(event) { helper(event, total); }, false);

}

</script>
</head>

<body onload="init();">

<div id="div1">1</div>
<div id="div2">2</div>

</body>
</html>

感谢您的帮助！ :-)


问题是事件监听器和“total”都存在于同一范围内（init()）

事件函数始终会在 init() 范围内引用总计，即使在声明事件函数后发生更改也是如此

为了解决这个问题，事件函数需要在其自己的范围内有一个不会改变的“总计”。您可以使用匿名函数添加另一层作用域

例如：

(function (total) {
    div1.addEventListener('click', function(event) { helper(event, total); }, false);
}(total));

total += 4;

(function (total) {
  div2.addEventListener('click', function(event) { helper(event, total); }, false);
}(total));

匿名函数将 init() 的当前“总计”值作为参数传递。这会为匿名函数的作用域设置另一个“总计”，因此 init() 的总计是否更改并不重要，因为事件函数将首先引用匿名函数的作用域。

Edit:

另外，您需要在辅助函数的右大括号后面放置一个分号，否则脚本会抱怨“事件”未定义。

var helper = function(event, id)
{
  if (event.stopPropagation) event.stopPropagation();
  if (event.preventDefault) event.preventDefault();

  alert('id='+id);
};
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

scope

anonymousfunction

addEventListener 匿名函数中的 Javascript 变量范围 的相关文章

随机推荐

  • 如何使用 RGB 图像作为 C# EvalDll 包装器的输入？

    我使用提供的 ImageReader 训练了一个网络 现在我尝试在 C 项目中使用 CNTK EvalDll 来评估 RGB 图像 我看过与 EvalDll 相关的示例 但输入始终是浮点 双精度数组 而不是图像 如何使用公开的接口将经过训练

  • 从函数返回数组/指针

    我正在尝试创建一个从字符串派生的新整数数组 例如 char x 12334 23845 32084 int y 12334 23845 32084 我无法理解如何从函数返回数组 我理解这是不可能的 我最初尝试过 Convert string

  • 无法通过 HTTPS 在 Linux 上克隆 github 存储库

    我正在尝试做一个简单的git clone https github com org project git在 CentOS 机器上但得到 错误 访问时请求的 URL 返回错误 401https github com org project

  • R 中“存在的一切都是对象”的真正含义是什么？

    I saw 要理解 R 中的计算 有两个口号很有帮助 存在的一切都是对象 发生的一切都是函数调用 约翰 钱伯斯 但我刚刚发现 a lt 2 is object a FALSE 实际上 如果一个变量是纯基类型 它的结果 is object 将

  • 运行“Composer Install”后缺少“vendor”文件夹

    我目前正在尝试在 Vagrant Homestead 上运行一个从 Github 拉取的 Laravel 应用程序 我将其连接到数据库 并在文件夹内运行 Composer Install Composer Update 当我尝试在浏览器上访

  • 从二项式分布生成相关随机数

    我试图找到一种方法从几个二项式分布生成相关随机数 我知道如何用正态分布来做到这一点 使用MASS mvrnorm 但我没有找到适用于二项式响应的函数 您可以使用以下命令生成相关制服copula包 然后使用qbinom函数将它们转换为二项式变

  • Python，选择日志文件的目录

    我正在使用 Python 日志记录库 并且想要选择将写入日志文件的文件夹 目前 我举了一个例子TimedRotatingFileHandler与入口参数filename myLogFile log 这边走myLogFile log与我的 p

  • 处理 J2ME 中的可选 API

    是什么right在 Java Mobile 中使用可选 API 的方式 是否需要制作不同版本的应用程序 或者使用以下命令在运行时检查 API 可用性是否足够System getProperty 假设我希望我的应用程序支持 JSR 256 传

  • Minikube服务访问本地VPN

    如何让我的 pod 或 minikube 能够查看我的笔记本电脑通过 VPN 连接到的 10 x 网络 设置 迷你库贝 PHP 容器 php 代码访问私有存储库 10 x 地址 东西可以在本地找到 但我无法在 Pod 中访问同一个 10 x

  • c# 在 FTP 服务器内上传 byte[]

    我需要在 FTP 服务器内上传一些数据 按照 stackoverflow 的帖子 了解如何在其中上传文件和 FTP 一切正常 现在我正在努力改进我的上传 我想收集数据并上传它们而不创建本地文件 而不是收集数据 将它们写入文件 然后在 FTP

  • Scala 宏：检查某个注释

    感谢以下问题的解答我之前的问题 https stackoverflow com q 17223213 397695 我能够创建一个函数宏 使其返回一个Map将每个字段名称映射到其类的值 例如 trait Model case class U

  • C++ 中不可预测的无限 for 循环[重复]

    这个问题在这里已经有答案了 我正在编写一个程序来返回该字符的第一次出现以及该字符在字符串中的频率 函数中的 for 循环执行无限次 而 if 条件和块甚至没有执行一次 问题是什么 string size type find ch strin

  • 如何将字符串写入 Scala Process？

    我启动并运行了一个 Scala 进程 val dir path to working dir val stockfish Process Seq wine dir stockfish 8 x32 exe val logger Process

  • isOrientationSupported 在 IOS 中已弃用

    我收到此错误 但我不知道如何修复它 WARNING

  • 查询嵌套数据的有效方法

    我需要从表中选择许多 主 行 同时还为每个结果返回另一个表中的许多详细行 在没有多个查询的情况下实现这一目标的好方法是什么 一个用于主行 一个用于每个结果以获取详细行 例如 数据库结构如下 MasterTable MasterId BIGI

  • 在 Pandoc Markdown 输出中生成内联而不是列表式脚注？

    当从某种格式 例如 HTML 或 Docx 转换为 Pandoc 中的 Markdown 时 是否可以以内联样式呈现所有脚注 这是主要文本 这是脚注 而不是作为编号引用文档末尾有相应的列表吗 我想将我的 Markdown 文档 从我的论文的

  • Azure DevOps Pipelines - Python - ModuleNotFoundError，尽管 sys.path.append() 或设置 PYTHONPATH

    我正在尝试为我的 python 应用程序运行一些测试 但我无法正确设置路径 以便我的test py可以找到它 我的应用程序的结构如下 repo src main python main module repo tests test py A

  • tf.get_collection 提取一个范围的变量

    I have n 例如 n 3 范围和x 例如 x 4 每个作用域中定义的变量数量 范围是 model generator 0 model generator 1 model generator 2 计算损失后 我想根据运行时的标准从其中一

  • 根据条件删除行

    因此 第 1 列由各种名称组成 如果该列中特定单元格中的名称不属于名称子集 我想删除整行 我尝试使用嵌套的 If 和 For 来遍历行 但事实证明按升序删除行不起作用 现在 我希望 for 循环从最终值开始到初始值 并且我在最后使用了 St

  • addEventListener 匿名函数中的 Javascript 变量范围

    单击每个 div 时 如果单击了 div 1 则应发出警报 1 如果单击了 div 2 则应发出警报 5 我试图使此代码尽可能简单 因为这是在更大的应用程序中需要的

热门标签