How do I trigger an event like keyup with a specified keycode

Question

I am trying to test in jasmine and need to trigger a keyup event with a specified keycode (enter in my case). When i try this

document.getElementById('title').addEventListener('keyup', function(e){
    console.log(e.keyCode);
});
var e = $.Event("keyup", {keyCode: 64});
$('title').trigger(e);

the event is not being triggered, although when I do manually set focus on it and press it is being triggered

but when i try this

$('title').on('keyup', function(e){
     e.currentTarget.style.color = 'red';
     console.log(e.keyCode);
});

var e = $.Event("keyup", {keyCode: 64});
$('title').trigger(e);

it is being triggered. I dont understand why one is not working and the other one is

First line of the `.trigger()` doc: "Any event handlers attached with .on() or one of its shortcut methods are triggered when the corresponding event occurs." — ChrisG, May 20 '19 at 14:02
first line should be: `document.getElementById('title').addEventListener('keyup', function(e){` — GrafiCode, May 20 '19 at 14:06
Again: `.trigger()` only triggers event listeners that were added using a jQuery function. It won't trigger listeners added using `addEventListener` — ChrisG, May 20 '19 at 14:10
ahhh that makes sense, but then how do i trigger a event added using addEventListener — Tenzin Choklang, May 20 '19 at 14:11
Did you try googling it? This is the second result for me when I google "trigger a event added using addEventListener": https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript — ChrisG, May 20 '19 at 14:11
Possible duplicate of [How to trigger event in JavaScript?](https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript) — ChrisG, May 20 '19 at 14:14
Also dupe of: https://stackoverflow.com/questions/961532/firing-a-keyboard-event-in-javascript — ChrisG, May 20 '19 at 14:15

Daphoque · Accepted Answer · 2019-05-20T14:14:43.897

1

If you use addEventListener don't use trigger, use dispatchEvent :

document.getElementById("q").dispatchEvent(new KeyboardEvent('keyup', { 'keyCode': 65 }));

edited May 20 '19 at 14:14

answered May 20 '19 at 14:07

Daphoque

4,120
1
18
28

SoWhat · Answer 2 · 2019-05-20T14:20:22.137

0

.trigger() only works when the event handler is attached using jquery. It doesn't work on native event listeners.

In the second case, you're attaching with $(..).on So jquery will trigger that event. Native Event Listener won't work here. You can use dispatchEvent

var event = new KeyboardEvent("keyup", {keyCode: 64});

document.getElementById('title').addEventListener('keyup', function(e){
    console.log(e.keyCode);
});

document.getElementById('title').dispatchEvent(event);

Check here for more info https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

edited May 20 '19 at 14:20

answered May 20 '19 at 14:14

SoWhat

5,338
2
27
57

its logging undefined – Tenzin Choklang May 20 '19 at 14:18
1

Give it a try now. – SoWhat May 20 '19 at 14:20

How do I trigger an event like keyup with a specified keycode

2 Answers2