调用jQuery的blur()触发元素时，addEventListener绑定的blur事件不生效

问题原因 #

你使用的jQuery的blur()触发方法存在事件体系的隔离问题：jQuery自己维护了独立的事件缓存，调用$().blur()时，只会触发两类回调：

• 元素行内onBlur属性绑定的回调
• 通过jQuery的on()/blur()等方法绑定的回调
  通过原生addEventListener绑定的事件不在jQuery的事件缓存中，所以不会被触发。

解决方案 #

有两种常用的修复方案：

方案1：统一用jQuery绑定事件 #

把原生的addEventListener替换成jQuery的事件绑定语法，让jQuery能识别到回调：

// 替换原来的addEventListener代码
$('#password').on('blur', (event) => {
  event.target.style.background = 'pink';
});

方案2：用原生API触发blur事件 #

直接调用DOM元素的原生blur方法，会触发所有类型绑定的blur事件，不受jQuery事件体系限制：

function TriggerBlur(){
  document.getElementById('password').blur();
}

两种方案任选其一即可，修改后点击按钮时两个blur回调都会正常触发：既弹出Hello提示，输入框背景也会变成粉色。 #

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