原生javascript中$(this)的等价物

Question

我想添加和事件监听器到一个按钮,我仍然相对较新的编码完全基于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
});

Answer 1

在事件处理程序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/