JavaScript将击键发送到网站

Question

网站如何识别击键，鼠标移动？是否可以通过JavaScript发送命令（例如按下鼠标左键），而无需实际按下鼠标按钮？

如果我的问题不太清楚，我很乐意进一步解释。我是新手，只是想从某个地方开始，但迷路了。

您能向我推荐一些很好的学习材料，以便我阅读，非常感谢。

Answer 1

鼠标，键盘和其他事件

站点通过向其订阅功能来识别键盘和鼠标的“事件”。

您可以通过html这样操作：onkeypress="keypressFunction()"，onmousemove="mousemoveFunction()"，onclick="clickFunction()" ... and other events

<div onclick="clickFunction()">Clickable</div>

当然，这些功能keypressFunction()，mousemoveFunction()，clickFunction()需要存在于您站点的某个位置，无论位于内部还是内部>>

<script>
function clickFunction(){ alert('clicked!') }
</script>
或包含在文件中：<script src="myscripts.js"></script>。

您也可以只使用javascript订阅事件：

//Write `document` instead of `element` to apply to whole document
//Or you can find element by id like document.getElementById('id')
//You can of course use any other method of finding elements such
// as querySelector or use variables you already made before
element.onkeypress = function(eventArgs){
    eventArgs = eventArgs || window.event;
    // use eventArgs.keyCode to get which key
};
或者，更为常见和安全，请订阅addEventListener：

element.addEventListener('keypress', function(eventArgs){
    eventArgs = eventArgs || window.event;
    // use eventArgs.keyCode to get which key
});
注意，如果使用addEventListener，则不必在事件名称（例如on）中写前缀onkeypress。

您当然也可以使用已经建立的功能：

element.onkeypress = myFunction;
和

element.addEventListener('keypress', myFunction);
所有这些事件通常都传递特定于事件的参数，以提供有关事件中确切发生的事件的更多数据。

例如，onclick传递了MouseEvent args，因此您可以知道单击事物时鼠标所在的位置（屏幕上的X和Y坐标），按住alt / shift / ctrl键以及哪个鼠标按钮被单击（左，右，中间）。

Keyboard events have their own event args，包含按下了哪个键盘键的信息（如果已按住等）。您可以找到所有事件参数here。

模拟事件

[一些基本事件，例如单击元素的鼠标，仅可以用element.click();进行模拟，但这并不能使您对正在传递的事件args有太多控制。

为了正确发送事件，您需要创建一个浏览器事件对象，并将其分派到一个元素上：

//Call oncontextmenu (right mouse click) on an element:
var element = document.getElementById('Id_here');
if (window.CustomEvent) {
    element.dispatchEvent(new CustomEvent('contextmenu'));
} else if (document.createEvent) {
    var ev = document.createEvent('HTMLEvents');
    ev.initEvent('contextmenu', true, false);
    element.dispatchEvent(ev);
} else { // Internet Explorer
    element.fireEvent('oncontextmenu');
}
使用该事件对象，您可以传递一些数据，这里是模拟按键：

var element = document.getElementById('Id_here');
var keyboardEvent = document.createEvent("KeyboardEvent");
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

keyboardEvent[initMethod](
  "keydown", // event type: keydown, keyup, keypress
  true,      // bubbles
  true,      // cancelable
  window,    // view: should be window
  false,     // ctrlKey
  false,     // altKey
  false,     // shiftKey
  false,     // metaKey
  65,        // keyCode: unsigned long - the virtual key code, else 0. 65 - 'a'
  0          // charCode: unsigned long - the Unicode character associated with the depressed key, else 0
);
element.dispatchEvent(keyboardEvent);
Jquery给出了一些不错的事件，以使模拟这些事情变得更加容易，但是您可以在整个堆栈溢出中找到它们，甚至不用说google。只需搜索js simulating keypress/mouse，js subsribe to key/mouse event以及您可以想象的所有其他内容。