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(使用前将#替换为@)

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

  • 如何更改bootstrap中form-control弹出窗口中必填字段的默认消息?

  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一
  • JavaScript 重定向到新窗口

    我有以下代码 它根据下拉列表的值重定向到页面 我如何使其在新窗口中打开 function goto form var index form select selectedIndex if form select options index
  • jquery从变量中删除html元素

    我将 html 保存在变量中 var itinerary events today html 我有很多 html 和一个按钮我想删除 它的 ID 为 myButton 如何从变量中保存的 html 中删除它 我建议这种方法 var itin
  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成
  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • 如何使用tampermonkey模拟react应用程序中的点击?

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 为什么我不能在 AngularJS 中使用 data-* 作为指令的属性名称?

    On the t他的笨蛋 http plnkr co edit l3KoY3 p preview您可以注意到属性名称模式的奇怪行为data 在指令中 电话 Test of data named attribute br
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • 如何更改此 jquery 插件的时区/时间戳?

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • 如何使用 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 我试图使此代码尽可能简单 因为这是在更大的应用程序中需要的