相当于本机 javascript 中的 $(this)

2024-01-11

我想向按钮添加事件侦听器,并且我对纯 javascript 编码还比较陌生,所以我不知道本机等效项是什么$this

在我的代码中

// the markup

<ul class="menu">
   <li><a href="#" data-something="value">text</a></li>
   <li><a href="#" data-something="value2">text2</a></li>
</ul>

var menu = document.querySelector(".menu");
menu.addEventListener("click", function(){
    // console.log $(this).val
    // what I wanted is to get that data-attribute of the clicked item
});

在事件处理程序内this将表示事件处理程序绑定到的元素。您不会拥有 jQuery 提供的所有实用功能。因此,在您的示例中,您将无法使用以下方法检索数据属性this.data("something")

要检索自定义属性的值,代码必须将事件传递给函数。来自event or e在该示例中,target属性将包含触发事件的元素,由于事件的传播,该元素可能并不总是绑定事件处理程序的元素。使用getAttribute方法来检索自定义属性的值。另外,不要将自定义属性设置为大写,因为 html 规范不允许这样做,并且会创建不可访问的属性。

var menu = document.querySelector(".menu");
menu.addEventListener("click", function(e){
    alert(e.target.getAttribute("data-something"));
});

JSFiddle: http://jsfiddle.net/pjcvB/ http://jsfiddle.net/pjcvB/

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

相当于本机 javascript 中的 $(this) 的相关文章

随机推荐

  • 在 R 中封装 sqldf

    是否可以在sqldf中的字符串内添加注释 就像是 sqldf select ProductID count distinct SalePrice as num regPz from MYDF where SalesFlag 0 coded
  • AndroidStudio - Gradle 中的模块依赖关系

    我在 Android Studio 中使用模块依赖项编译 Android 应用程序时遇到了一些问题 所以 我希望我的应用程序使用 slidingmenu 库 链接here https github com jfeinstein10 Slid
  • 确定 Delphi 中的 WPD 设备类型

    我正在尝试确定我的 WPD 设备在 Delphi 中的类型 在我的应用程序中 我需要知道该设备是手机还是相机或者什么 根据这篇 MSDN 文章 https msdn microsoft com en us library windows h
  • Nginx 无法通过 Ansible 重新启动

    我在剧本中有一个任务 尝试像往常一样通过处理程序重新启动 nginx name run migrations command bash lc some command notify restart nginx 然而 剧本因这个错误而中断 N
  • Feedback.js 服务器 API

    反馈 js http experiments hertzen com jsfeedback 是一个很棒的 jquery 插件 允许您创建反馈表单 其中包括在客户端浏览器上创建的屏幕截图以及表单 如何将捕获的图像和用户的评论发送到服务器端 a
  • 如果未设置变量,则使用函数对其进行初始化 - PHP

    执行脚本时 有时会设置变量 有时不会 有时情况并非如此 我会收到一个通知 表明该变量未定义 为了清除通知 我简单地添加了以下代码 if isset var var NULL 它可以根据需要工作 因为它测试变量是否尚未设置 这样我们就不会设置
  • 有没有办法知道 iOS 中的应用程序何时被删除?

    我的问题是这样的 我在 iOS 应用程序上安排了一些 UILocalNotifications 问题是 如果我删除应用程序而不删除与通知关联的对象 并因此从 ScheduledNotifications 数组中删除通知 通知仍然会触发 尽管
  • 在 C# 中表示什么[重复]

    这个问题在这里已经有答案了 我是 C 新手 直接深入修改我收到的项目的一些代码 但是 我不断看到这样的代码 class SampleCollection
  • Python C API 如何将结构数组从 C 传递到 Python

    对于我正在创建的 python 模块 我想向 python 用户传递一个如下所示的结构数组 struct tcpstat inet prefix local inet prefix remote int lport int rport in
  • CSS规则中选择器的优先级

    让我先展示一下示例代码 tbl tr hover background color FFA270 important tbl td nth child odd background color F0FFE2 cell height 5ex
  • 选项菜单操作栏

    谁能明白为什么我的帮助图标没有显示在操作栏中 我已将代码的相关部分粘贴在下面 谢谢 菜单topline xml
  • 使用 jQuery 交换 div 内容

    这是我的 HTML div class large img src images photos Interior jpg alt The interior div class caption The interior div div div
  • 如何将 POINT mysql 类型与 mysqli - php 一起使用[重复]

    这个问题在这里已经有答案了 基于这张桌子 http php net manual en mysqli stmt bind param php来自 PHP net Type specification chars Character Desc
  • 使用 EF core 2.1 调用 DbFunction

    我尝试调用存储在数据库中的标量函数 这是我的代码 public class PronosticDbContext DbContext public PronosticDbContext DbContextOptions
  • PhoneGap:Camera API getPicture 对话框放大

    在Android 4 4中 使用Camera API getPicture API将导致对话框放大 代码如下 var sourceType pictureSource SAVEDPHOTOALBUM navigator camera get
  • PHPUnit TDD,PHP 致命错误:调用未定义的方法

    我正在使用 PHPUnit 启动一个 TDD 项目 但有些事情确实让我烦恼 似乎只要所有的类和方法都没有实现 所有的测试就无法运行 如果类或方法尚未实现 我该如何使测试继续事件 Thanks 编辑 TDD 的重点不就是你的测试套件在编写测试
  • Django 按计数排序

    我有这些模型 class Project models Model title models CharField max length 80 date created models DateTimeField auto now add Tr
  • 如何在GDB中打印Fortran数组?

    在 C C 中 我通常将指针打印为数组name dimension Fortran 的等价物是什么 Fortran 90 使用描述符来表示其数组的维度 形状 并传递假定形状的数组参数 Fortran 中的指针也很特殊 它们只能指向合格的目标
  • 在 jBoss 6.2 与 jBoss 7.3 中部署应用程序时的不同响应

    我们最近将 jBoss EAP 从 6 2 升级到 7 3 0 升级后 我们观察到该应用程序开始表现异常 我们使用的是 spring 框架版本 4 1 9 RELEASE 例如 RestController public class Com
  • 相当于本机 javascript 中的 $(this)

    我想向按钮添加事件侦听器 并且我对纯 javascript 编码还比较陌生 所以我不知道本机等效项是什么 this 在我的代码中 the markup ul class menu li a href text a li li a href