<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>模擬事件</title>
</head>
<body>
<button id="mouseEventTrigger">鍵盤模擬按鈕事件</button>
<button id="keyBoardEventTrigger">按鈕模擬鍵盤事件</button>
</body>
<script>
var btn1 = document.getElementById('mouseEventTrigger'); var btn2 = document.getElementById('keyBoardEventTrigger'); var mouseEvt = document.createEvent('MouseEvent'); var keyEvt = document.createEvent('keyBoardEvent'); mouseEvt.initEvent('click',false,false); keyEvt.initEvent('keypress',{ isTrusted: true, key: "ArrowUp", code: "ArrowUp" }); document.onkeydown = function(e){ console.log(e); var e = e || window.event; if(e.keyCode == 38){ console.log(mouseEvt); btn1.dispatchEvent(mouseEvt); } }; document.onkeypress = function(){ console.log("按鈕模擬上方向鍵事件"); } btn1.onclick = function(e){ console.log(e); console.log("上方向鍵模擬點擊事件"); }; btn2.onclick = function(e){ console.log(e); document.dispatchEvent(keyEvt); } </script>
</html>
需要注意的一點就是，鍵盤模擬事件的傳值方式和鼠標是一樣的。另外，模擬的鍵盤事件和真·觸發事件似乎是並不一樣的，
如圖，但的確是能觸發鍵盤事件中。
來回顧昨天寫democollections界面時，給數字輸入框組件加了一個新功能是模擬鍵盤事件得按鍵，即點擊按鈕觸發鍵盤事件。
實現是實現了
但是方式有點奇怪，按鈕在實例而非子組件中，點擊按鈕--觸發triggerKeyEvent事件，如果是要模擬上方向鍵的按鍵，則初始化一個arrowup，但是如同上面提到的，
即使這樣傳參最后觸發的事件也像假的鍵盤事件一樣。觸發后通過$ref調用子組件的handleup完成累加，這里也不太對，應該是在子組件的input上觸發那個自定義事件然后子組件內部的handleup方法自動執行...
容我這個弟弟再學學