多条相同input 输入框 jquery 失去焦点事件如何获取？
思否 问答 👍 2 含 AI 优化版
问题
多条相同input 输入框 jquery 失去焦点事件如何获取？
由大模型辅助整理，保留原意，优化结构与可读性。
问题概述
页面中有多个结构相同的 input 输入框，希望用 jQuery 统一处理它们的失去焦点事件，并能区分具体是哪一个输入框触发的。
涉及技术（如有）
- jQuery 事件绑定
focusout/blur事件冒泡机制- 事件委托
期望结果
用较少的代码统一监听多个同类输入框的失焦事件，并能准确识别触发事件的具体元素。
回答
原始回答
focusout 是支持冒泡的。所以你可以用事件委托，直接绑在共同的父级上。blur 是不支持冒泡的，所以必须先有 dom，然后针对 input 绑定事件。你为了区分可以再 parentNode 里面 findIndex 一下，然后会有一个下标。也可以判断当前 input 是否有 data-id，有的话就读，没有的话就给个 uuid，这样也可以标识出来。本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。
AI 优化 · 回答整理
解答思路
关键在于 focusout 和 blur 的冒泡差异：focusout 支持事件冒泡，可以用事件委托统一绑定在父级容器上；blur 不支持冒泡，必须在每个 input 上单独绑定。
示例代码（如有代码）
// focusout 支持冒泡，直接委托给父级容器
$('.parent').on('focusout', 'input', function () {
// this 即当前失焦的 input
});
详细说明
- 用
focusout做事件委托：因为focusout支持冒泡，可以直接把事件绑定在这些input的共同父级容器上，减少绑定次数。 - 用
blur则必须逐个绑定：由于不支持冒泡，需要等 DOM 渲染完成后，对每个input单独绑定blur事件。 - 区分具体是哪个输入框：
- 可以在事件回调里用类似
$(this).parent().find('input').index(this)的方式，在父级容器内查找当前元素的下标； - 也可以给每个
input提前设置data-id属性，事件触发时优先读取data-id；如果没有设置，就临时生成一个uuid并写回data-id，作为唯一标识。
- 可以在事件回调里用类似
小结
多个同类输入框的失焦处理，优先选用支持冒泡的 focusout 做事件委托，绑定更少、性能更好；如果必须用 blur，则需逐个绑定。区分具体元素时，可以用下标或 data-id（配合 uuid 兜底）来标识。
由大模型辅助整理，保留原意，补充结构与代码格式。
回答转载自 SegmentFault