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." — user5734311
– user5734311, Commented May 20, 2019 at 14:02
first line should be: document.getElementById('title').addEventListener('keyup', function(e){ — GrafiCode
– GrafiCode, Commented May 20, 2019 at 14:06
Again: .trigger() only triggers event listeners that were added using a jQuery function. It won't trigger listeners added using addEventListener — user5734311
– user5734311, Commented May 20, 2019 at 14:10

Daphoque · Accepted Answer · 2019-05-20 14:14:43Z

2

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

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

edited May 20, 2019 at 14:14

answered May 20, 2019 at 14:07

Daphoque

4,6781 gold badge24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SoWhat · Accepted Answer · 2019-05-20 14:20:22Z

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, 2019 at 14:20

answered May 20, 2019 at 14:14

SoWhat

5,6222 gold badges31 silver badges64 bronze badges

2 Comments

Tenzin Choklang Over a year ago

its logging undefined

SoWhat Over a year ago

Give it a try now.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related