Запуск событий клавиатуры с данными с помощью JavaScript

Кажется, это дублирующий вопрос. Но я искал во многих местах, я не смог найти правильный пример отправки данных о событии с использованием простого javascript (без использования jQuery).

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent не содержит примеров.

Мне нужно что-то вроде этого. https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#Adding_custom_data_.E2.80.93_CustomEvent

Пример:

// listening for keypress event,    
ele.addEventListener("keydown", function(e){
    console.log(e.keyCode); //expecting 50
});


// triggering like this
var e = new KeyboardEvent("keydown", {keyCode: 50});
ele.dispatchEvent(e);

javascript keyboard-events custom-events mouseevent
person Darshan    schedule 13.06.2014    source источник
comment
Учитывая только последний webkit/chrome   -  person Darshan    schedule 13.06.2014

Ответы (1)


arrow_upward
1
arrow_downward

С помощью потрясающего поста http://www.2ality.com/2013/06/triggering-events.html от Dr. Аксель Раушмайер

Вы можете запустить, используя ниже 3 конструктора,

// use any one of these constructor as per your usecase

var e = new Event("keydown"); //without any data
var e = new CustomEvent("keydown", {detail: {prop1: "value"}}); //if any data required use detail: only detail/bubbles/cancelable properties can be passed here
var e = new KeyboardEvent("keydown");

// add properties

e.keyCode = 50; // works for *Event* and *CustomEvent* constructors
e.key = 50; // in *KeyboardEvent* constructor *keyCode* is **readonly** property so use *key* property. Refer properties detail using https://developer.mozilla.org/en-US/docs/Web/Reference/Events/keydown
e.anyNewProp = "value"; // if any new prop is required

// finally dispatchEvent using dispatchEvent method of dom element

ele.dispatchEvent(e);

// listening for keypress event,    
ele.addEventListener("keydown", function(e){
    console.log(e.keyCode); //results 50
    console.log(e.key); //results 50
    console.log(e.anyNewProp); //results "value"
});
person Darshan    schedule 13.06.2014