如何使用oninput事件获取元素的data属性值（不使用addEventListener）

你遇到的问题有两个核心原因，直接修正即可：

1. 传递事件对象
   内联事件调用时没有传入事件参数，导致函数里的e未定义。需要把HTML中的oninput="on_input()"改为oninput="on_input(event)"，手动传递原生事件对象。

2. 正确获取data属性
   e.target.data('x')是jQuery的语法，原生JavaScript不支持这个方法。你可以用两种原生方式获取：

   • 利用元素的dataset属性：e.target.dataset.x（推荐，更简洁）
   • 使用getAttribute()方法：e.target.getAttribute('data-x')（兼容更旧浏览器）

修正后的完整代码 #

JavaScript

function on_input(e){
    // 方式1：使用dataset
    const value = e.target.dataset.x;
    // 方式2：使用getAttribute
    // const value = e.target.getAttribute('data-x');
    console.log(value);
}

HTML

<input type='text' class='inp' oninput="on_input(event)" data-x='lorem'>
<input type='text' class='inp' oninput="on_input(event)" data-x='ipsum'>
<input type='text' class='inp' oninput="on_input(event)" data-x='dolor'>

这样修改后，在输入框中输入内容时，控制台会依次输出lorem、ipsum、dolor，完全符合你的需求。

内容的提问来源于stack exchange，提问作者vegas