获取值数据属性本机Javascript [重复]答案

【问题标题】：Get value data-atribute native Javascript [duplicate]获取值数据属性本机Javascript [重复]
【发布时间】：2017-04-27 09:17:13
【问题描述】：

我使用原生 js，我需要从我点击的所有元素的数据属性中获取价值。

window.onload = function() {

    let btn = document.getElementsByClassName('btn');

    for( let i = 0; i < btn.length; i++ ) {
        btn[i].addEventListener( "click" , function(e) {
            let dataBtn = e.getAttribute('data-btn');
            console.log(dataBtn);
        });
    }

};

但我得到错误（e.getAttribute 不是函数）

我可以在原生 js 中获取和使用它吗？

【问题讨论】：

e.target.getAttribute(...) developer.mozilla.org/en-US/docs/Web/API/Event/target
我更喜欢dataSet对象e.target.dataSet.btn
Here 和 here
@SankarRaj 那是 Jquery 而不是 javascript 解决方案
@Satpal 我不相信这不是一个骗局，因为 OP 知道如何在回调中接收事件。真正的骗子在这里：1）stackoverflow.com/questions/48239/… 2）stackoverflow.com/questions/14422898/…

标签： javascript

【解决方案1】：

您可以通过调用this.getAttribute('data-btn') 或调用btn[i].getAttribute('data-btn'); 来访问事件处理函数中当前单击元素的'data-btn' 属性。

代码：

let btn = document.getElementsByClassName('btn');

for (let i = 0, len = btn.length; i < len; i++) {
  btn[i].addEventListener('click' , function() {
    let dataBtn = this.getAttribute('data-btn');
    console.log(dataBtn);
  });
}

<a class="btn btn-default" data-btn="1" href="#" role="button">Link</a>
<button class="btn btn-default" data-btn="2" type="submit">Button</button>
<input class="btn btn-default" data-btn="3" type="button" value="Input">
<input class="btn btn-default" data-btn="4" type="submit" value="Submit">

【讨论】：