• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > JavaScript实现按键精灵的原理分析

JavaScript实现按键精灵的原理分析

作者:咖啡机(K.F.J) 字体:[增加 减小] 来源:互联网 时间:2017-05-11

咖啡机(K.F.J)通过本文主要向大家介绍了javascript 模拟按键,javascript按键事件,javascript 按键,javascript的执行原理,javascript原理等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

最近有个需求,需要在页面上面自动点击、输入、提交。

用以模拟真实用户的操作行为,可以通过直接执行某个元素绑定的事件,来执行操作。

也可以创建事件,再派发事件,执行操作。关于事件的更多细节,可以参考《JavaScript中事件处理》

1、模拟MouseEvent中的click事件,x与y位置随机点击

2、模拟TouchEvent中的touchstart和touchmove,用scroll来做滑动效果

3、模拟FocusEvent,聚焦到屏幕中的输入框内

一、鼠标事件MouseEvent

MouseEvent接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括:click,dblclick,mouseup,mousedown。

MouseEvent派生自 UIEvent,UIEvent 派生自 Event。

function random(max) {
 return Math.floor(Math.random() * max);
}
function on(dom, type, fn) {
 dom.addEventListener(type, fn, false);
}
on(document.body, 'click', function(e) {
 console.log('click事件 x:'+e.clientX, 'y:'+e.clientY);
});
/**
 * MouseEvent
 * 包括事件 click,dblclick,mouseup,mousedown
 */
function mouse() {
 var x = random(window.outerWidth),
  y = random(window.outerHeight);
 var event = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window,
  clientX: x,
  clientY: y
 });
 console.log('click环境 x:'+x, 'y:'+y);
 document.body.dispatchEvent(event);
}
mouse();
</div>

1)Event

语法如下:

typeArg:事件的名字,DOMString类型。

eventInit:

属性

选项 默认 类型 描述
bubbles 可选 false Boolean 事件是否冒泡
cancelable 可选 false Boolean 事件是否可取消
scoped
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JavaScript实现按键精灵的原理分析
  • javascript 组合按键事件监听实现代码

相关文章

  • 2017-05-11详解NodeJs支付宝移动支付签名及验签
  • 2017-05-11javascript 中null和undefined区分和比较
  • 2017-09-18javascript原型链详细解析
  • 2017-05-11原生js实现验证码功能
  • 2017-05-11jQuery简易时光轴实现方法示例
  • 2017-05-11jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
  • 2017-05-11jQuery排序插件tableSorter使用方法
  • 2017-05-11拖动时防止选中
  • 2017-05-11AngularJS学习第一篇 AngularJS基础知识
  • 2017-05-11jQuery窗口拖动功能的实现代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Bootstrap导航条学习使用(二)
    • js上下视差滚动简单实现代码
    • Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
    • JavaScript数据结构中栈的应用之表达式求值问题详解
    • js undefined 和 null
    • 原生JavaScript实现AJAX、JSONP
    • JS验证字符串功能
    • Node.js Mongodb 密码特殊字符 @的解决方法
    • SVG描边动画
    • xmlplus组件设计系列之下拉刷新(PullRefresh)(6)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有