比如看到很多图片的时候,我们需要批量下载,这个时候可以打开控制台,写一段JS代码批量模拟下载步骤即可,而不用一个一个的手动点击,非常方便。
模拟鼠标点击最简单的就是模拟点击了,我们只需要选中一个元素,然后执行click函数即可。
下面的代码实现在一个表格中,点击每一个图片。
const images = document.getElementById('content').getElementsByTagName('img'); for (let image of images) { images.click(); }如果要模拟鼠标双击,或者鼠标移动,则没有简单的函数可以调用。这个时候我们需要新建一个MouseEvent对象,并手动触发即可。
创建MouseEvent对象的语法为:const event = new MouseEvent(typeArg, mouseEventInit);
typeArg为鼠标事件类型,即上面的监听鼠标事件去掉on后的字符串,
click: 鼠标点击事件
dblclick: 鼠标双击事件
mousedown: 鼠标上的按钮被按下了
mouseup: 鼠标按下后松开时触发的事件
mousemove: 鼠标移动时触发的事件
mouseout: 鼠标离开监听该事件的元素或子元素时触发的事件
mouseover: 鼠标移动到监听该事件的元素或子元素时触发的事件
mouseEventInit为MouseEvent初始化的选项,指定鼠标事件的各种属性,可选值如下:
button: 整形,触发鼠标事件时按下的按钮编号
buttons: 整形,触发鼠标事件时弹起来的按钮编号
clientX: 鼠标指针在DOM内容区的X坐标
clientY:鼠标指针在DOM内容区的Y坐标
offsetX: 鼠标指针相对父节点填充边缘的X坐标
offsetY: 鼠标指针相对父节点填充边缘的Y坐标
screenX: 鼠标指针在全局屏幕的X坐标
screenY: 鼠标指针在全局屏幕的Y坐标
pageX: 鼠标指针在整个DOM内容(包括分页)的X坐标
pageY: 鼠标指针在整个DOM内容(包括分页)的Y坐标
altKey: 布尔值,表示此时的alt键是否也按下
ctrKey: 布尔值,表示此时的alt键是否也按下
shiftKey: 布尔值,表示此时的shift键是否也按下
metaKey: 布尔值,windows平台表示Window键是否同时按下,mac表示Command键是否同时按下
比如下面的示例在坐标200,200处触发一个鼠标双击事件:
// 创建一个event对象 const createEvent = new MouseEvent('dblclick', { clientX: 300, clientY: 300, }); // 触发该事件 document.dispatchEvent(createEvent);可以使用任意的Document对象的dispatchEvent方法触发一个事件,这些触发的事件和实际发生的事件一模一样。
模拟键盘输入事件和模拟鼠标事件一样,不过这儿我们要创建一个KeyboardEvent事件对象。
创建KeyboardEvent对象的语法类似为:const event = new KeyboardEvent(typeArg, KeyboardEventInit);
typeArg为键盘输入事件类型,即上面的监听键盘输入事件去掉on后的字符串,
keydown: 键盘按下这个动作
keypress: 键盘被按住
keyup: 键盘被弹起
KeyboardEventInit为KeyboardEvent初始化的选项,指定键盘输入事件的各种属性,可选值如下:
type: 事件类型,如'keydown'或者'keyup'
key: 表示按下的键盘内容是什么即键值,按下字母'p'时,值为'p'
code: 表示键盘代码,按下字母'p'时,值为'KeyP'
keyCode(过时): 整数,表示键码,每个键都有唯一的键码,字母'p'的键码为80
altKey: 布尔值,表示此时的alt键是否也按下
ctrKey: 布尔值,表示此时的alt键是否也按下
shiftKey: 布尔值,表示此时的shift键是否也按下
metaKey: 布尔值,windows平台表示Window键是否同时按下,mac表示Command键是否同时按下
repeat: 布尔值,如果一个键一直被按着,则其值为true,表示重复
比如实现在按下字母'a'键时,自动按下'alt+ctrl+a'可以像下面实现。
// 监听按键事件 document.onkeydown = function(event) { console.log('keyCode: ' + event.keyCode + ' code: ' + event.code + ' alt:' + event.altKey); if (event.keyCode === 65 || event.code === 'KeyA') { // 如果按下的是a键,则新建一个a键按下的事件并触发 const createEvent = new KeyboardEvent('keydown', { altKey: true, shiftKey: true, keyCode: 65, code: 'KeyA' }); document.dispatchEvent(createEvent); } };然后你就会发现上面的函数疯狂的输出A键被按下,哈哈哈!知道内存达到限制!
附录