1

I'm using jquery in a web app. I have a page which is listening for keypresses like this:

  document.addEventListener('keyup', function (event) {    
    event.preventDefault();
    var key = event.keyCode;
    console.log("pressed key "+key);
  });

That works in terms of me pressing keys - it outputs the key code to the console.

I now want to simulate a key press with a different function, which i'm doing like this:

  var keycode = 27;
  $(document).trigger(
    jQuery.Event( 'keyup', { keyCode: keycode, which: keycode } )
  );

But, nothing happens - specifically, i don't see the console log from the first function.

Can anyone see my mistake?

EDIT: it works if I change the first function to use jQuery .on() rather than native js .addEventListener, but i'd still like to understand why. Is document a different entity to $(document)?

Max Williams
  • 32,435
  • 31
  • 130
  • 197
  • *Is 'document' a different entity to $(document)?* - yes, one's a DOM element, the other is a jquery object wrapping the DOM element. – freedomn-m Mar 25 '22 at 15:10
  • ah - so how can I fix it (without changing the original function)? – Max Williams Mar 25 '22 at 15:10
  • well - yes they are. Jquery adds a layer on top of your DOM elements so while it is possible to handle an event fired by vanilla js you can't do it the other way around. One way of fixing your problem would be to use vanilla js instead of jquery to fire the event manually. – albjerto Mar 25 '22 at 15:12
  • @albjerto ah i see, thank you. I thought they were two ways of getting at the same things. So jquery can only trigger event listeners that were set up with jquery? – Max Williams Mar 25 '22 at 15:13
  • There's some solutions on [this question](https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript). I managed to get it to work with `document.dispatchEvent(new KeyboardEvent("keyup", { keyCode: 66 }));` https://jsfiddle.net/8fmvhydg/ – freedomn-m Mar 25 '22 at 15:13
  • 1
    @MaxWilliams exactly. See it like this: jQuery sits on top of JS, so a handler defined in JS has no way of detecting an event fired "above" it. If you want to fire a jQuery event, you need a jQuery listener – albjerto Mar 25 '22 at 15:17

2 Answers2

1

To address the edit, when you select an element using the jQuery $() notation it selects it as a jQuery object with lots of jQuery methods available. Using the vanilla JavaScript document selector will create a DOM element, but not a jQuery object. This page has more info on alternative ways to make jQuery objects when needed: http://jqfundamentals.com/chapter/jquery-basics

Sarah Vela
  • 144
  • 3
  • Thanks. The easiest thing was just to change the listener to be jquery too with .on() but I was interested in why the two things didn't seem to be compatible. I think i had always assumed jquery was syntactic sugar in a way but clearly that's not the case. – Max Williams Mar 25 '22 at 16:21
0

Jquery have a function that you can bind at your eventlistener .keyup(). You can read the full documentation here: https://api.jquery.com/keyup/

Pietro Teggi
  • 104
  • 7