5

我想向按钮添加事件侦听器，而且我在纯粹使用 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
});
4

2 回答 2

6

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

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

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

JS 小提琴：http: //jsfiddle.net/pjcvB/

于 2013-09-02T18:36:49.053 回答
1

您可以使用下面的代码来获得几乎等价的$(this)

document.querySelector("#myId").addEventListener("click", function(e) {
  console.log(this);    //Prints the Element
  $this = new Array(e.target);
  console.log($this);   //Prints the Object
});

笔

希望这可以帮助。

于 2018-02-15T08:22:39.813 回答