javascript - 输入属性通过 onclick 事件不可见

Question

我在 jade/pug View 中有一个简单的单选按钮表单，如下所示:

form
  input(type='radio',id="0", group="group0", value="some string" my_prop="hello", onclick='radioClick(this)')

在我的 js 脚本中，我定义了 radioClick 函数，如下所示:

function radioClick(e){
  console.log(e)
  console.log(e.my_prop)
  console.log(e.group)
  console.log(e.type)
  console.log(e.id)
}

输出如下所示:

<input type="radio" my_prop="hello" group="0" id="0" value="some string" onclick="radioClick(this)">
undefined //<--- Why are these undefined?
undefined //<--- Why are these undefined?
radio
0

为什么属性 group 和 my_prop 未定义？当触发 onclick 事件时如何访问它们？

Answer 1

您可以使用 getAttribute() 并将所需的属性放入字符串中。

function radioClick(e){
  console.log(e.getAttribute('my_prop'));
  console.log(e.getAttribute('group'));
  console.log(e.getAttribute('type'));
  console.log(e.getAttribute('id'));
}

<input type="radio" my_prop="hello" group="0" id="0" value="some string" onclick="radioClick(this)">