Question

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

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

我确实喜欢上面但没有工作。你能有人给我一个样品或链接吗？

Answer 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);

您可以浏览decide to keep one.

Answer 2

这是obsolete way of handling events

<强>已过时

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

如果您想处理整个文档的关键字事件，请从MDN Documentation of Keyboard events开始：

＆＃13;

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);

＆＃13;

<div id="output"></div>

＆＃13;

Answer 3

这应该是我想要实现的目标。

＆＃13;

  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;
  });

＆＃13;

<!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>

＆＃13;

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

3 个答案: