如何完全模拟jQuery.trigger？解决原生JS触发键盘事件无效问题

核心问题 #

目标网站禁止直接通过JS修改input元素的value，仅能通过修改值后模拟空格按键触发输入识别。使用网站内置jQuery的方式可行，但原生JS模拟的事件无法被输入框识别。

jQuery的特殊处理逻辑 #

jQuery能生效的关键在于它对事件对象的标准化填充和事件触发流程的兼容处理，而原生JS手动模拟时容易遗漏关键属性：

• 事件属性的完整映射：jQuery.Event会自动为keypress事件同步设置which、keyCode、charCode等属性，同时默认开启bubbles（冒泡）和cancelable（可取消）特性，确保事件符合浏览器的事件检测逻辑。
• 跨浏览器兼容处理：jQuery内部会根据浏览器版本自动适配事件对象的构造方式，比如在Chrome中会正确设置现代键盘事件的key、code属性，避免原生构造时因属性缺失被网站的输入校验逻辑忽略。
• 事件触发的完整流程：$(elem).trigger(press)不仅会触发目标元素的keypress事件，还会模拟事件的冒泡传播，确保网站绑定在父元素上的输入监听也能捕获到事件，而原生dispatchEvent如果不指定冒泡参数，可能无法触发完整的监听链。

原生JS替代实现 #

以下是模拟jQuery逻辑的原生代码，能在Chrome 114中达到相同效果：

const elem = document.querySelector('input');
elem.value = 'Im so tried of meme frameworks';
elem.focus();

// 构造符合标准的键盘事件
const press = new KeyboardEvent('keypress', {
  bubbles: true,
  cancelable: true,
  which: 32,
  keyCode: 32,
  charCode: 32,
  key: ' ',
  code: 'Space'
});

// 触发事件
elem.dispatchEvent(press);

如果上述代码仍不生效，可以尝试补充触发完整的按键生命周期事件：

const elem = document.querySelector('input');
elem.value = 'Im so tried of meme frameworks';
elem.focus();

// 构造通用事件配置
const eventConfig = {
  bubbles: true,
  cancelable: true,
  which: 32,
  keyCode: 32,
  key: ' ',
  code: 'Space'
};

// 触发keydown
elem.dispatchEvent(new KeyboardEvent('keydown', eventConfig));
// 触发keypress
elem.dispatchEvent(new KeyboardEvent('keypress', {...eventConfig, charCode: 32}));
// 触发keyup
elem.dispatchEvent(new KeyboardEvent('keyup', eventConfig));

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