JavaScript中的模拟事件和自定义事件实例分析


Posted in Python onJuly 27, 2018

本文实例讲述了JavaScript中的模拟事件和自定义事件。分享给大家供大家参考,具体如下:

前面介绍了JavaScript中为事件指定处理程序的五种方式和JavaScript的事件对象event。

下面介绍JavaScript中的模拟事件和自定义事件。

1、DOM中的事件模拟

1) DOM中的事件模拟有以下3个步骤:

步骤1:创建事件对象event

可以在document对象上使用createEvent()方法创建event对象,此方法接收一个参数,即要创建的事件类型的字符串。在DOM2级中这些字符串都使用英文复数形式,而在DOM3级中都变成了单数。这个字符串可以是以下几个字符串之一:

UIEvents:一般化的UI事件,鼠标事件和键盘事件都继承自UI事件,DOM3级中是UIEvent

MouseEvents:一般化的鼠标事件,DOM3级中是MouseEvent

MutationEvents:一般化的DOM变动事件,DOM3级中是MutationEvent

HTMLEvents:一般化的HTML事件,没有对应的DOM3级事件,被分散到 其他类别中。

步骤2:初始化事件对象

使用与事件有关的信息对其进行初始化,每种类型的event对象都有一个特殊的方法,为它传入适当的数据就可以初始化该event对象,不同类型的方法的名字也不相同,具体要取决于createEvent()中使用的参数。

步骤3:触发事件

使用dispatch()方法,此方法接收一个参数,即要触发事件的event对象。

2) 模拟鼠标事件:

使用createEvent()方法创建event对象,传入字符串"MouseEvents",返回的对象有一个名为initMouseEvent()方法,用于指定与该鼠标事件有关的信息。

模拟按钮的单击事件:

var btn = document.getElementsByTagNames("button")[0];
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, 0, null);
btn.dispatchEvent(event);

3) 模拟键盘事件:

使用createEvent()方法创建event对象,传入字符串"KeyboardEvent",返回的对象有一个名为initKeyboardEvent()方法。

DOM2级事件并没有专门规定键盘事件,后来的DOM3级事件才正式将其作为一种事件给出规定。IE9是目前唯一支持DOM3级键盘事件的浏览器,但其他浏览器也可以模拟键盘事件。

在使用createEvent()方法之前,需要先检测浏览器是否支持DOM3级事件。

模拟按住Shift的同时又按下A键:

var text = document.getElementsByTagNames("input")[0];
if (document.implementation.hasFeature("KeyboardEvents", 3.0) {
  var event = document.createEvent("KeyboardEvent");
  event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 0, "Shift", 0);
}
text.dispatchEvent(event);

4) 模拟其他事件:

① 模拟变动事件:

使用createEvent()方法创建event对象,传入字符串"MutationEvents",返回的对象有一个名为initMutationEvent()的方法。

var event = document.createEvent("MutationEvents");
event.initMutationEvent("DOMNodeInserted", true, false, someNode, "", "", "", 0);
target.dispatchEvent(event);

② 模拟HTML事件:

使用createEvent()方法创建event对象,传入字符串"HTMLEvents",返回的对象有一个名为initMutationEvent()的方法。

var event = document.createEvent("HTMLEvents");
event.initEvent("focus", true, false);
target.dispatchEvent(event);

5) 自定义DOM事件:

DOM3级还定义了自定义事件。自定义事件不是由DOM原生触发的,目的是让开发人员创建自己的事件。

创建自定义事件,可以使用createEvent("CustomEvent")方法,返回的对象有一个名为initCustomEvent()的方法,接收如下4个参数:

type(字符串):事件类型;

bubbles(布尔值):时间是否应该冒泡;

cancelable(布尔值):表示事件是否可以取消;

detail(对象):任意值,保存在event对象的detail属性中。

var div = document.getElementsByTagNames("div")[0];
EventUtil.addHandler(div, "myEvent", function(event) {
  alert("div:" + event.detail);
});
EventUtil.addHandler(document, "myEvent", function(event) {
  alert("document:" + event.detail);
});
if (document.implementation.hasFeature("CustomEvents", 3.0) {
  var event = document.createEvent("CustomEvent");
  event.initCustomEvent("myEvent", true, false, "Hello world");
}
div.dispatchEvent(event);

单击div会输出:

div:Hello world
document:Hello world

单击document会输出:

document:Hello world

2、IE中的事件模拟

IE中的事件模拟有以下3个步骤:

① 使用document.createEventObject()方法在IE中创建event对象,与DOM不同的是,此方法不接受参数,结果会返回一个通用的event对象。

② 为event对象手动添加所有必要的信息,没有方法来辅助添加。

③ 在目标上使用fireEvent()方法,此方法接收两个参数:事件处理程序的名称和event对象。在调用fireEvent()方法时,会自动为event对象添加srcElementtype属性,其他属性则必须手动添加。

在IE中,模拟任何事件都采用相同的模式。

模拟click事件:

var btn = document.getElementsByTagNames("button")[0];
var event = document.createEventObject();
event.screenX = 100;
event.screenY = 0;
event.clientX = 0;
event.clientY = 0;
event.strlKey = false;
event.altKey = false;
event.shiftKey = false;
Event.button = 0;
btn.fireEvent("onclick", event);

模拟keypress事件:

var text = document.getElementsByTagNames("input")[0];
var event = document.createEventObject();
event.strlKey = false;
event.altKey = false;
event.shiftKey = false;
Event.keyCode = 65;
btn.fireEvent("onkeypress", event);

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/table/javascript_event

希望本文所述对大家JavaScript程序设计有所帮助。

Python 相关文章推荐
Python批量重命名同一文件夹下文件的方法
May 25 Python
在Django的模型中执行原始SQL查询的方法
Jul 21 Python
详解 Python 与文件对象共事的实例
Sep 11 Python
Python 3实战爬虫之爬取京东图书的图片详解
Oct 09 Python
python操作列表的函数使用代码详解
Dec 28 Python
Python创建普通菜单示例【基于win32ui模块】
May 09 Python
查看Django和flask版本的方法
May 14 Python
Python实现的旋转数组功能算法示例
Feb 23 Python
Python3.6中Twisted模块安装的问题与解决
Apr 15 Python
python实现比较类的两个instance(对象)是否相等的方法分析
Jun 26 Python
解决jupyter notebook 前面书写后面内容消失的问题
Apr 13 Python
keras自动编码器实现系列之卷积自动编码器操作
Jul 03 Python
浅谈tensorflow中几个随机函数的用法
Jul 27 #Python
tensorflow 中对数组元素的操作方法
Jul 27 #Python
Python读取excel中的图片完美解决方法
Jul 27 #Python
tensorflow实现图像的裁剪和填充方法
Jul 27 #Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
Jul 27 #Python
对Tensorflow中的矩阵运算函数详解
Jul 27 #Python
python+influxdb+shell编写区域网络状况表
Jul 27 #Python
You might like
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
论JavaScript模块化编程
2016/03/07 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
python dict如何定义
2020/09/02 Python
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
九年级体育教学反思
2014/01/23 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
工程安全员岗位职责
2014/03/09 职场文书
个人授权委托书
2014/04/03 职场文书
小学生倡议书范文
2014/05/13 职场文书
护理专科学生自荐书
2014/07/05 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle