如何在JavaScript中识别触发函数的输入字段？

当然可以做到！你不需要手动传入元素标识，有几种简洁的方式能在mirar()函数内部直接定位到触发keyup事件的输入框，下面给你详细拆解：

方法1：利用全局事件对象（快速适配你的现有代码） #

在 inline 事件处理函数中，浏览器会自动把事件对象暴露在全局（event变量），你可以直接在函数里通过event.target获取触发事件的元素：

修改后的代码 #

HTML：

<input name="q1" id="q1" onkeyup="mirar()" type="text" />
<input name="q2" id="q2" onkeyup="mirar()" type="text" />

JavaScript：

function mirar() {
  // 获取触发事件的输入框元素
  const triggerInput = event.target;
  
  // 你可以获取元素的任意属性，比如id、name
  console.log('触发事件的输入框ID：', triggerInput.id);
  console.log('触发事件的输入框name：', triggerInput.name);
  
  // 这里写你的业务逻辑，比如同步内容、验证输入等
}

注意：如果你的代码开启了严格模式，全局event可能无法访问，这时可以改成把事件对象作为参数传入：
HTML 改成 <input onkeyup="mirar(event)" ...>，函数接收参数：

function mirar(e) {
  const triggerInput = e.target;
  // 后续操作
}

这种写法兼容性更好，推荐使用。

方法2：通过this关键字绑定触发元素 #

在 inline 事件中，this默认指向触发事件的元素，你可以通过call()方法把this传递给mirar函数，这样函数内部的this就指向输入框了：

修改后的代码 #

HTML：

<input name="q1" id="q1" onkeyup="mirar.call(this)" type="text" />
<input name="q2" id="q2" onkeyup="mirar.call(this)" type="text" />

JavaScript：

function mirar() {
  console.log('触发事件的输入框ID：', this.id);
  console.log('触发事件的输入框name：', this.name);
}

这种写法不需要依赖全局事件对象，逻辑更清晰，但需要修改 inline 的调用方式。

方法3：使用现代事件监听（推荐的最佳实践） #

如果你想遵循分离HTML和JavaScript的前端最佳实践，建议放弃 inline 事件，改用addEventListener绑定事件，这样代码更易于维护和扩展：

修改后的代码 #

HTML：

<input name="q1" id="q1" type="text" />
<input name="q2" id="q2" type="text" />

JavaScript：

// 获取所有目标输入框（这里通过name前缀筛选，你也可以用class或其他选择器）
const targetInputs = document.querySelectorAll('input[name^="q"]');

// 给每个输入框绑定keyup事件
targetInputs.forEach(input => {
  input.addEventListener('keyup', mirar);
});

function mirar(e) {
  const triggerInput = e.target;
  console.log('触发事件的输入框：', triggerInput.id);
  // 你的业务逻辑代码
}

这种方式没有 inline 代码，便于统一管理事件，也更容易添加或移除事件监听，是现代前端开发的常用方式。

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