如何使用jQuery获取触发onchange事件的input字段的name或id属性

核心原理：事件触发时，事件回调接收的事件对象中，target属性指向实际触发事件的DOM节点，直接读取该节点的name、id属性即可区分不同输入框，不同开发场景下的具体写法如下：

原生JavaScript实现 #

• 事件监听绑定/事件委托写法
  给输入框单独绑定事件、或者给父容器做事件委托都适用，箭头函数写回调时也能正常拿到目标元素，不会出现this指向问题：

  <!-- 示例输入字段 -->
  <input type="text" name="username" id="user-input" placeholder="用户名">
  <input type="email" name="email" id="email-input" placeholder="邮箱">
  <input type="number" name="age" id="age-input" placeholder="年龄">
  
  <script>
    // 单元素绑定示例
    const allInputs = document.querySelectorAll('input')
    allInputs.forEach(input => {
      input.addEventListener('change', (e) => {
        const triggerInput = e.target
        const fieldName = triggerInput.name
        const fieldId = triggerInput.id
        const fieldValue = triggerInput.value
        // 拿到name/id后就可以做对应字段的逻辑处理
        console.log('触发字段：', fieldName, fieldId, '输入值：', fieldValue)
      })
    })
  
    // 事件委托写法（父容器绑一次即可，后续动态新增的输入框也能响应）
    const formContainer = document.querySelector('.form-wrap')
    formContainer.addEventListener('change', (e) => {
      // 过滤非input元素触发的冒泡事件
      if (e.target.tagName.toLowerCase() !== 'input') return
      const fieldName = e.target.name
      const fieldId = e.target.id
      // 业务逻辑
    })
  </script>
  

• 行内onChange绑定写法
  如果直接在HTML标签上写onChange属性，把this作为参数传入处理函数即可，这里的this就指向当前输入框节点：

  <input type="text" name="address" id="addr-input" onchange="handleInputChange(this)">
  <script>
    function handleInputChange(currentInputEl) {
      const fieldName = currentInputEl.name
      const fieldId = currentInputEl.id
      console.log(fieldName, fieldId)
    }
  </script>
  

主流框架中的写法 #

• Vue（2/3通用）
  不传额外参数时，回调默认接收事件对象；需要传自定义参数时，用$event占位传入事件对象即可：

  <template>
    <!-- 无额外参数 -->
    <input name="phone" id="phone-input" @change="handleChange">
    <!-- 传自定义参数 -->
    <input name="gender" id="gender-input" @change="handleChange('editMode', $event)">
  </template>
  <script setup>
  const handleChange = (customArg, e) => {
    // 无额外参数时，第一个参数就是事件对象
    const event = e ? e : customArg
    const fieldName = event.target.name
    const fieldId = event.target.id
  }
  </script>
  

• React
  React的事件为合成事件，用法和原生基本一致，回调参数直接拿事件对象即可：

  export default function UserForm() {
    const handleChange = (e) => {
      const fieldName = e.target.name
      const fieldId = e.target.id
      const fieldValue = e.target.value
      // 通常可以直接用[fieldName]: fieldValue的写法统一更新表单状态
    }
  
    return (
      <div>
        <input name="nickname" id="nick-input" placeholder="昵称" onChange={handleChange} />
      </div>
    )
  }
  

踩坑提示：如果使用了带内部结构的输入框组件（比如带前置/后置图标的输入框），点击内部子元素时e.target可能指向图标、内边距容器等子节点，不是绑定事件的input本身，这时候替换成e.currentTarget即可，currentTarget永远指向绑定事件的元素，不受冒泡子节点干扰。

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