如何创建 Key 事件并将其传递给文档？答案

【问题标题】：How create Key event and pass it to document?如何创建 Key 事件并将其传递给文档？
【发布时间】：2017-11-14 10:47:16
【问题描述】：

我想测试关键事件处理程序。我搜索并找到使用'createEvent'，'dispatchEvent'的结果。

var e = document.createEvent('HTMLEvents');
e.keyCode = 83;
e.initEvent(onkeydown, false, true);
document.dispathEvent(e);

我确实喜欢上面的方法，但没有工作。谁能给我一个示例或链接？

【问题讨论】：

标签： javascript keyevent

【解决方案1】：

document.addEventListener('onkeydown', function (e) {
      console.log("onkeydown event raised");
  		console.log(e);
	});
	var e = document.createEvent('HTMLEvents');
	e.keyCode = 83;
	e.initEvent('onkeydown', true, true);
	document.dispatchEvent(e);

您可以通过this

【讨论】：

【解决方案2】：

这是obsolete way of handling events

已弃用

此功能已从 Web 标准中删除。虽然有些浏览器可能仍然支持它，但它正在处理中被丢弃。尽可能避免使用它并更新现有代码；请参阅本页底部的兼容性表以指导您的决定。请注意，此功能可能随时停止工作。

如果你想处理整个文档的 keyup 事件，这里是 MDN Documentation of Keyboard events 的方法：

window.addEventListener("keyup", function(event) {
  let str = "KeyboardEvent: key='" + event.key + "' | code='" +
            event.code + "'";
  let el = document.createElement("span");
  el.innerHTML = str + "<br/>";
 
  document.getElementById("output").appendChild(el);
}, true);

&lt;div id="output"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

我认为这应该是你想要达到的目标。

  document.querySelector('.trigger-event').addEventListener('click', function(e){
    e.preventDefault(); 

    var e = new Event("keydown");
    e.key="a";    // just enter the char you want to send 
    e.keyCode=e.key.charCodeAt(0);
    e.which=e.keyCode;
    e.altKey=false;
    e.ctrlKey=true;
    e.shiftKey=false;
    e.metaKey=false;
    e.bubbles=true;
    this.dispatchEvent(e);

  }, false);
  document.querySelector('.trigger-event').addEventListener('keydown', function(e){
    e.preventDefault();
    alert('Got keydown ' + e.key);
  },false);

  document.addEventListener('keydown', function(e){
    e.preventDefault();
    document.getElementById('keyValue').innerHTML = e.key;
    document.getElementById('charCode').innerHTML = e.keyCode;
  });

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Demo</title>
</head>
<body>


  <h3>Demo</h3>
  <p>
    <button class="btn-flat-blue trigger-event">Trigger Keydown event</button>
  </p>




  <h3> Press a key to see the key code</h3>
  <p>
    key <span id="keyValue"></span> = charCode <span id="charCode"></span> 
  </p>
  
</div>
</body>
</html>

【讨论】：