使用没有 jquery 的事件侦听器触发按键事件

Question

我想在不使用 jQuery

的情况下触发按键事件作为对事件侦听器的反应

let arrow = document.querySelector("#arrow");
//When you click on the arrow
arrow.addEventListener('click', function(e){
// It triggers a keypress (down)
   $(document).trigger(keypressing);
  });

[编辑] 我试过了，但似乎没有触发模拟按键：

let arrow = document.querySelector(".scroll-down");


arrow.addEventListener('click', function(e){
console.log('simulating the keypress of down arrow')
document.dispatchEvent(new KeyboardEvent('keypress', {'key': 'x'}));
});


$(window).bind('keypress', function(event) {
 if (event.key == 'x') { 
 console.log('its working with x')
}
});

Answer 1

您可以使用dispatchEvent触发事件。
示例：使用键 x

触发 keypress

document.dispatchEvent(new KeyboardEvent('keypress', {'key': 'x'}));

docs

这对我触发按键事件有用：

// Create listener 
document.addEventListener('keydown', () => { console.log('test')})

// Create event
const keyboardEvent = document.createEvent('KeyboardEvent');
const initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? 'initKeyboardEvent' : 'initKeyEvent';

keyboardEvent[initMethod](
  'keydown', // event type: keydown, keyup, keypress
  true,      // bubbles
  true,      // cancelable
  window,    // view: should be window
  false,     // ctrlKey
  false,     // altKey
  false,     // shiftKey
  false,     // metaKey
  40,        // keyCode: unsigned long - the virtual key code, else 0
  0          // charCode: unsigned long - the Unicode character associated with the depressed key, else 0
);

// Fire event
document.dispatchEvent(keyboardEvent);

使用没有 jquery 的事件侦听器触发按键事件

Trigger keypress event with event listener WITHOUT jquery

javascript

keypress

dom-events