JavaScript能否通过event属性或this关键字获取HTML表单数据

完全可以，不需要使用getElementBy*系列方法、也不需要querySelector，直接通过事件对象属性或this关键字就能拿到表单输入值。 #

通过event对象获取（无需修改原有HTML） #

submit事件触发时，event.target直接指向触发事件的表单元素，表单元素自带elements集合，支持按索引、name/id属性直接访问内部表单控件，全程不需要调用DOM查询方法。
代码示例：

function getData(event) {
  event.preventDefault();
  const form = event.target;
  // 按索引取：form.elements[0].value；按id/name取：form.elements.inpt.value
  const inptValue = form.elements.inpt.value;
  return inptValue;
}

原有HTML无需改动即可运行：

<form id="form" onsubmit="getData(event)">
  <input id="inpt" type="text">
</form>

通过this关键字获取 #

DOM标准事件回调中，this默认指向绑定事件的DOM元素，不同绑定方式写法有区别：

• 行内onsubmit绑定场景，需要显式把this作为参数传入回调：

<form id="form" onsubmit="getData(event, this)">
  <input id="inpt" type="text">
</form>

function getData(event, form) {
  event.preventDefault();
  const inptValue = form.elements.inpt.value;
  return inptValue;
}

• addEventListener绑定场景（禁止用箭头函数），回调内的this自动指向表单元素，无需额外传参。

注意：箭头函数没有自身的this绑定，会继承外层作用域的this指向，无法直接指向绑定事件的DOM元素，这类场景优先用event.target获取表单即可。

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